无法在reactjs中路由到另一个页面
无法在reactjs中路由到另一个页面
提问于 2022-05-18 06:24:41
我很难转到另一页。当单击路由时，它会更改链接，但保持不变。对不起，我是初学者。这是一个图片的网站和我的代码路线页。
import React from "react";
const Blank2 = () => {
return <main id="mainContent">
<div className="container">
<div className="row justify-content-center mt-5 p-0">
<h3>Blank2</h3>
</div>
</div>
</main>
}
export default Blank2;我的app.js
import React from "react";
import { Routes ,Route } from 'react-router-dom';
import "./App.css";
import NavBar from "./components/NavBar/NavBar";
import Footer from "./components/Footer/Footer";
import VolcanoInfo from "./components/VolcanoInfo/VolcanoInfo";
import Blank1 from "./components/Blank1/Blank1";
import Blank2 from "./components/Blank2/Blank2";
import Blank3 from "./components/Blank3/Blank3";
import image from './image.jpg';
//TODO Web Template Studio: Add routes for your new pages here.
const App = () => {
return (
<React.Fragment>
<NavBar />
<Routes>
<Route exact path = "/VolcanoInfo" component = { VolcanoInfo } />
<Route path = "/Blank1" component = { Blank1 } />
<Route path = "/Blank2" component = { Blank2 } />
<Route path = "/Blank3" component = { Blank3 } />
</Routes>
<Footer />
</React.Fragment>
);
}
<header className="App-header">
<img src={image} className="image" alt="image" />
</header>
export default App;
回答 3
Stack Overflow用户
发布于 2022-05-18 07:07:34
对于React路由器v6，这里有几件事情做错了。您需要将component替换为element，并使用BrowserRouter或HashRouter。此外，我们也不需要exact从反应路由器v6。您的代码应该如下所示
import {BrowserRouter} from 'react-router-dom';
...
<BrowserRouter>
<NavBar />
<Routes>
<Route path = "/VolcanoInfo" element= { <VolcanoInfo /> } />
<Route path = "/Blank1" element = { <Blank1 /> } />
<Route path = "/Blank2" element = { <Blank2 /> } />
<Route path = "/Blank3" element = { <Blank3 /> } />
</Routes>
<Footer />
</BrowserRouter>Stack Overflow用户
发布于 2022-05-18 06:55:48
我看到你在使用react-router-dom v6。React路由器Dom实际上很容易使用，但有时我们可能会与旧版本混淆。
- 您需要对您的路线进行
<BrowserRouter>包装。 - 与
component属性不同，v6使用element，然后传入要路由的组件。(例：element={<Blank1 />})
以上文档中的更多细节。希望这能有所帮助！
Stack Overflow用户
发布于 2022-05-18 10:09:27
反应路由器v6 在这里教程。v5和v6之间的许多变化，根据这位医生的说法：
import React from "react";
import { BrowserRouter, Routes ,Route } from 'react-router-dom';
import "./App.css";
import NavBar from "./components/NavBar/NavBar";
import Footer from "./components/Footer/Footer";
import VolcanoInfo from "./components/VolcanoInfo/VolcanoInfo";
import Blank1 from "./components/Blank1/Blank1";
import Blank2 from "./components/Blank2/Blank2";
import Blank3 from "./components/Blank3/Blank3";
import image from './image.jpg';
//TODO Web Template Studio: Add routes for your new pages here.
const App = () => {
return (
<BrowserRouter>
<header className="App-header">
<img src={image} className="image" alt="image" />
</header>
<NavBar />
<Routes>
<Route path = "/VolcanoInfo" element= { <VolcanoInfo /> } />
<Route path = "/Blank1" element= { <Blank1 />} />
<Route path = "/Blank2" element= { <Blank2 />} />
<Route path = "/Blank3" element= { <Blank3 />} />
</Routes>
<Footer />
</BrowserRouter>
);
}
export default App;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72284105
复制相关文章
相似问题
腾讯云开发者
