React Router v6在单页SPA上显示所有组件(路由)(可滚动)

Question

我一直在尝试使用react-router，但无法在一个页面上呈现和显示所有页面(不必单击<Link>即可查看每个页面)。

当在NavBar.jsx中单击<Route>路径时，我的所有网站页面都将显示，但只显示该特定组件。

我已经阅读了很多不同的文章，并查看了React Router v6文档以获得帮助，并尝试使用他们的示例，但如果用户不必点击链接即可访问每个页面，我仍然无法使我的所有页面都显示为加载(SPA)。

我的代码段：

App.jsx

<BrowserRouter>
<Routes>
<Route path="/" exact={true} component={Home} />
<Route path='/home' component={Home} />
<Route path='/about' component={About} />
</Routes>
</BrowserRouter>

NavBar.jsx

<Nav>
<Link to="/home">Home</Link>
<Link to="/about">About</Link>
</Nav>

(localhost:3000/-->显示主页)(localhost:3000/about->显示"关于"页面)等等

如果有任何帮助或建议，我将不胜感激。谢谢

Answer 1

好的，如果你使用这个react-router-6，那么你需要这个语法：

<BrowserRouter>
<Routes>
<Route path='/' element={<Home />}/>
<Route path='/home' element={<Home />}/>
<Route path='/about' element={<About />}/>
</Routes>
</BrowserRouter>

您可以在项目文件夹中的package.json文件中检查您使用的路由器版本。