reactjs 在react-router-dom v6中具有到同一组件的多条路径

7uzetpgm 于 2022-11-22 发布在 React

关注(0)|答案(3)|浏览(196)

我尝试在react router v6中使用多个路径/路由来呈现相同的组件
使用以前版本的react router dom，我可以做到这一点，它将工作：

<Route exact path={["/", "/home"]}>
     <Home />
</Route>

<Route exact path={"/" | "/home"}>
     <Home />
</Route>

现在使用v6，我正在尝试相同的事情，但它不起作用

<Route exact path={["/","/home"]} element={<Homepage />} />

我该怎么做？到底是什么改变了它不起作用？
App.js的完整代码，我在其中执行路由

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'
import Navbar from './components/Navbar';
import Footer from './components/Footer';
import Contact from './components/Contact';
import Homepage from './components/Homepage';
import Projects from './components/Projects'

function App() {
  return (<Router>
    <Navbar />
      <Routes>
        <Route exact path={["/","/home"]} element={<Homepage />} />
        <Route exact path="/contact" element={<Contact/>} />
        <Route exact path="/projects" element={<Projects />} />
      </Routes>
    <Footer />
  </Router>);
}

export default App;

reactjs

来源：https://stackoverflow.com/questions/70228810/having-multiple-paths-to-the-same-component-in-react-router-dom-v6

3条答案

按热度按时间

qrjkbowd1#

显然，在v6中，数组不再工作，你必须用旧的方法，但使用element prop。
试试看：

<Route exact path="/" element={<Homepage />} />
<Route exact path="/home" element={<Homepage />} />

Working CodeSandbox。

赞(0）回复(0）举报 2022-11-22

3df52oht2#

按照已接受的答案重复代码可能不是一个好主意，因为当对要加载的组件的调用发生变化时，代码很容易中断。
只需Map阵列即可创建路由：

{["/", "/home"].map((path, index) => {
        return (
          <Route path={path} element={
              <PageWrapper>
                <Home />
              </PageWrapper>
            }
            key={index}
          />
        );
      })}

赞(0）回复(0）举报 2022-11-22

hfyxw5xn3#

另一种选择是只对nav执行useRoutes操作，并将它们作为某些<Routes />的同级
我的使用要点：

import React from 'react';
import { Route, Routes, useRoutes } from 'react-router-dom';

import Nav from './components/common/nav';

export const App: React.FC = () => {
  const element = useRoutes([
    { path: '/', element: <Nav /> },
    { path: '/equipment', element: <Nav /> },
    { path: '/client-area/*', element: <Nav /> },
  ]);
  return (
    <main>
      {element}
      <Routes>
        <Route />
        <Route />
        <Route />
        {/* Your routes here */}
      </Routes>
    </main>
  );
};

赞(0）回复(0）举报 2022-11-22

我来回答

reactjs 在react-router-dom v6中具有到同一组件的多条路径

3条答案

相关问题

热门标签

最新问答