使用 react 路由器 v4 / v5 的嵌套路由-解网

问：

我目前正在使用 react router v4 为嵌套路由而苦苦挣扎。

最接近的例子是 React-Router v4 文档中的路由配置。

我想将我的应用程序分成 2 个不同的部分。

前端和管理区域。

我在想这样的事情：

<Match pattern="/" component={Frontpage}>
  <Match pattern="/home" component={HomePage} />
  <Match pattern="/about" component={AboutPage} />
</Match>
<Match pattern="/admin" component={Backend}>
  <Match pattern="/home" component={Dashboard} />
  <Match pattern="/users" component={UserPage} />
</Match>
<Miss component={NotFoundPage} />

前端的布局和样式与管理区域不同。因此，在首页中，回家的路线，大约和所以应该是子路线。

/home应呈现到 Frontpage 组件中，并且应该在 Backend 组件中呈现。/admin/home

我尝试了一些其他变化，但我总是以没有击中或./home/admin/home

JavaScript reactjs 嵌套 react-router react-router-v4

2赞 Giuliano Vilela 5/5/2017

感谢您用最终答案更新您的问题！只是一个建议：也许您可以只保留第 4 个列表和第一个列表，因为其他列表正在使用过时的 API 版本并且会分散答案的注意力

2赞 wesm 7/26/2017

哈哈，我不知道这个日期是什么格式：08.05.2017 如果你不想混淆人们，我建议你使用通用ISO8601格式的日期。08是月还是日？ISO8601 = year.month.day hour.minute.second（逐渐更精细）

1赞 tudorpavel 11/16/2017

不错的更新最终解决方案，但我认为您不需要逻辑。previousLocation

1赞 Oliver Watkins 4/7/2018

完全重写 React Router 的动机是什么？最好是一个好理由

1赞 datoml 4/7/2018

这是声明性方法。因此，您可以像使用 react 组件一样设置路由。

答：

54赞 jar0m1r 3/2/2017 #1

只是想提一下，自从这个问题发布/发布以来，react-router v4 发生了根本性的变化。

没有组件了！是确保只呈现第一个匹配项。井。。重定向到另一条路由。使用或省略以插入或排除部分匹配。<Match><Switch><Redirect>exact

请参阅文档。他们很棒。https://reacttraining.com/react-router/

这里有一个例子，我希望可以用来回答你的问题。

<Router>
  <div>
    <Redirect exact from='/' to='/front'/>
    <Route path="/" render={() => {
      return (
        <div>
          <h2>Home menu</h2>
          <Link to="/front">front</Link>
          <Link to="/back">back</Link>
        </div>
      );
    }} />          
    <Route path="/front" render={() => {
      return (
        <div>
        <h2>front menu</h2>
        <Link to="/front/help">help</Link>
        <Link to="/front/about">about</Link>
        </div>
      );
    }} />
    <Route exact path="/front/help" render={() => {
      return <h2>front help</h2>;
    }} />
    <Route exact path="/front/about" render={() => {
      return <h2>front about</h2>;
    }} />
    <Route path="/back" render={() => {
      return (
        <div>
        <h2>back menu</h2>
        <Link to="/back/help">help</Link>
        <Link to="/back/about">about</Link>
        </div>
      );
    }} />
    <Route exact path="/back/help" render={() => {
      return <h2>back help</h2>;
    }} />
    <Route exact path="/back/about" render={() => {
      return <h2>back about</h2>;
    }} />
  </div>
</Router>

希望它有所帮助，让我知道。如果这个例子不能很好地回答你的问题，请告诉我，我会看看我是否可以修改它。

0赞 Filuren 3/23/2017

没有 reacttraining.com/react-router/web/api/Redirect 那会比我做的干净得多。至少它不会让我使用 TypeScript。exactRedirect<Route exact path="/" render={() => <Redirect to="/path" />} />

2赞 Ville 4/2/2017

我是否正确理解（不再）没有嵌套/子路由这样的东西？我是否需要在所有路由中复制基本路由？react-router 4 是否不为以可维护的方式构建路由提供任何帮助？

5赞 punkbit 5/22/2017

@Ville我很惊讶;你找到更好的解决方案了吗？我不想到处都是路线，天哪

1赞 vikrant 10/10/2017

这将起作用，但请确保您在 bundle .js 的 webpack 配置中将公共路径设置为“/”，否则嵌套路由在页面刷新时将不起作用。

401赞 Lyubomir 4/10/2017 #2

在 react-router-v4 中，您不会嵌套 <Routes />。相反，将它们放在另一个 <Component /> 中。

例如

<Route path='/topics' component={Topics}>
  <Route path='/topics/:topicId' component={Topic} />
</Route>

应该成为

<Route path='/topics' component={Topics} />

跟

const Topics = ({ match }) => (
  <div>
    <h2>Topics</h2>
    <Link to={`${match.url}/exampleTopicId`}>
      Example topic
    </Link>
    <Route path={`${match.path}/:topicId`} component={Topic}/>
  </div>
)

这是一个直接来自 react-router 文档的基本示例。

1赞 himawan_r 4/18/2017

我能够在基本示例中从您的链接实现，但是当我手动键入 URL 时，它在我的 localhost 服务器上不起作用。但它确实在你的例子中。另一方面，当我用 # 手动输入 url 时，HashRouter 可以正常工作。你知道为什么在我的localhost服务器上，当我手动输入url时，BrowserRouter不起作用吗？

10赞 user1076813 4/25/2017

你能把 Topics 组件变成一个类吗？“匹配”参数从何而来？在 render（）中？

31赞 greenimpala 5/4/2017

看起来很荒谬，你不能只是含蓄的。to="exampleTopicId"${match.url}

9赞 JustDave 8/15/2017

您可以为每个文档 reacttraining.com/react-router/web/example/route-config 嵌套路由。这将允许根据文档中的主题进行集中路由配置。想想看，如果不可用，在更大的项目中管理这将是多么疯狂。

6赞 Lyubomir 8/15/2017

这些不是嵌套路由，它是一个单级路由，仍然使用 Route 的 render 属性，它以功能组件作为输入，仔细观察，没有 react router < 4 意义上的嵌套。RouteWithSubRoutes 是使用模式匹配的路由的单级列表。

9赞 Sanjeev Shakya 6/2/2017 #3

像这样的事情。

import React from 'react';
import {
  BrowserRouter as Router, Route, NavLink, Switch, Link
} from 'react-router-dom';

import '../assets/styles/App.css';

const Home = () =>
  <NormalNavLinks>
    <h1>HOME</h1>
  </NormalNavLinks>;
const About = () =>
  <NormalNavLinks>
    <h1>About</h1>
  </NormalNavLinks>;
const Help = () =>
  <NormalNavLinks>
    <h1>Help</h1>
  </NormalNavLinks>;

const AdminHome = () =>
  <AdminNavLinks>
    <h1>root</h1>
  </AdminNavLinks>;

const AdminAbout = () =>
  <AdminNavLinks>
    <h1>Admin about</h1>
  </AdminNavLinks>;

const AdminHelp = () =>
  <AdminNavLinks>
    <h1>Admin Help</h1>
  </AdminNavLinks>;


const AdminNavLinks = (props) => (
  <div>
    <h2>Admin Menu</h2>
    <NavLink exact to="/admin">Admin Home</NavLink>
    <NavLink to="/admin/help">Admin Help</NavLink>
    <NavLink to="/admin/about">Admin About</NavLink>
    <Link to="/">Home</Link>
    {props.children}
  </div>
);

const NormalNavLinks = (props) => (
  <div>
    <h2>Normal Menu</h2>
    <NavLink exact to="/">Home</NavLink>
    <NavLink to="/help">Help</NavLink>
    <NavLink to="/about">About</NavLink>
    <Link to="/admin">Admin</Link>
    {props.children}
  </div>
);

const App = () => (
  <Router>
    <div>
      <Switch>
        <Route exact path="/" component={Home}/>
        <Route path="/help" component={Help}/>
        <Route path="/about" component={About}/>

        <Route exact path="/admin" component={AdminHome}/>
        <Route path="/admin/help" component={AdminHelp}/>
        <Route path="/admin/about" component={AdminAbout}/>
      </Switch>

    </div>
  </Router>
);


export default App;

3赞 Aniruddh Agarwal 2/7/2018 #4

您可以尝试类似路由 .js

import React, { Component } from 'react'
import { BrowserRouter as Router, Route } from 'react-router-dom';
import FrontPage from './FrontPage';
import Dashboard from './Dashboard';
import AboutPage from './AboutPage';
import Backend from './Backend';
import Homepage from './Homepage';
import UserPage from './UserPage';
class Routes extends Component {
    render() {
        return (
            <div>
                <Route exact path="/" component={FrontPage} />
                <Route exact path="/home" component={Homepage} />
                <Route exact path="/about" component={AboutPage} />
                <Route exact path="/admin" component={Backend} />
                <Route exact path="/admin/home" component={Dashboard} />
                <Route exact path="/users" component={UserPage} />    
            </div>
        )
    }
}

export default Routes

应用.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { BrowserRouter as Router, Route } from 'react-router-dom'
import Routes from './Routes';

class App extends Component {
  render() {
    return (
      <div className="App">
      <Router>
        <Routes/>
      </Router>
      </div>
    );
  }
}

export default App;

我认为你也可以从这里实现同样的目标。

0赞 Malakai 4/3/2018

好点子！在 Java Spring 启动应用程序开发后开始使用 React 时，我也有同样的想法。我唯一要更改的是 Routes.js 中的“div”到“Switch”。tbh，您可以在 App 中定义所有路由.js但将其包装在 index.js 文件中，例如（create-react-app）

0赞 Aniruddh Agarwal 4/3/2018

是的，你是对的！我已经以这种方式实现了，这就是我提到这种方法的原因。

210赞 davnicwil 3/16/2018 #5

`react-router v6`

2022 年更新 - v6 具有 Just Work™ 的嵌套组件。Route

这个问题是关于 v4/v5 的，但现在最好的答案是如果可以的话，就使用 v6！

请参阅此博客文章中的示例代码。但是，如果您还不能升级...

`react-router v4 & v5`

的确，为了嵌套路由，您需要将它们放在路由的子组件中。

但是，如果您更喜欢更内联的语法，而不是跨组件分解 Routes，则可以为要嵌套的 Route 的 prop 提供功能组件。render

<BrowserRouter>

  <Route path="/" component={Frontpage} exact />
  <Route path="/home" component={HomePage} />
  <Route path="/about" component={AboutPage} />

  <Route
    path="/admin"
    render={({ match: { url } }) => (
      <>
        <Route path={`${url}/`} component={Backend} exact />
        <Route path={`${url}/home`} component={Dashboard} />
        <Route path={`${url}/users`} component={UserPage} />
      </>
    )}
  />

</BrowserRouter>

如果你对为什么要使用道具而不是道具感兴趣，那是因为它阻止了内联功能组件在每次渲染时重新挂载。有关更多详细信息，请参阅文档。rendercomponent

_{请注意，该示例将嵌套的 Routes 包装在 Fragment 中。在 React 16 之前，你可以改用容器 <div>。}

30赞 Merunas Grincalaitis 9/25/2018

感谢上帝，唯一一个清晰、可维护且按预期工作的解决方案。我希望 react 路由器 3 嵌套路由回来了。

0赞 Partha Ranjan Nayak 3/3/2019

这个完美看起来像有角度的路由出口

7赞 nbkhope 3/30/2019

您应该使用，而不是。前者通常用于 Route 道具;后者在你推送新路由时（例如 Link prop）match.pathmatch.urlpathto

0赞 Chuck L 8/5/2020

以 react-router v4/v5 为例，当有人导航到 /admin 页面时，它会呈现管理页面还是需要导航到 /admin/？谢谢！

0赞 Waleed93 1/12/2021

在我看来，嵌套路由的最佳和最简洁的解决方案

-6赞 EVGENY GLUKHOV 7/20/2018 #6

interface IDefaultLayoutProps {
    children: React.ReactNode
}

const DefaultLayout: React.SFC<IDefaultLayoutProps> = ({children}) => {
    return (
        <div className="DefaultLayout">
            {children}
        </div>
    );
}


const LayoutRoute: React.SFC<IDefaultLayoutRouteProps & RouteProps> = ({component: Component, layout: Layout, ...rest}) => {
const handleRender = (matchProps: RouteComponentProps<{}, StaticContext>) => (
        <Layout>
            <Component {...matchProps} />
        </Layout>
    );

    return (
        <Route {...rest} render={handleRender}/>
    );
}

const ScreenRouter = () => (
    <BrowserRouter>
        <div>
            <Link to="/">Home</Link>
            <Link to="/counter">Counter</Link>
            <Switch>
                <LayoutRoute path="/" exact={true} layout={DefaultLayout} component={HomeScreen} />
                <LayoutRoute path="/counter" layout={DashboardLayout} component={CounterScreen} />
            </Switch>
        </div>
    </BrowserRouter>
);

13赞 asukiaaa 8/22/2019 #7

我成功地定义了嵌套路由，并在 root 路由之前定义了嵌套路由。Switch

<BrowserRouter>
  <Switch>
    <Route path="/staffs/:id/edit" component={StaffEdit} />
    <Route path="/staffs/:id" component={StaffShow} />
    <Route path="/staffs" component={StaffIndex} />
  </Switch>
</BrowserRouter>

编号： https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Switch.md

0赞 Anbu369 9/21/2019

重新排列订单解决了我的问题，尽管我不知道这是否会有任何副作用。但现在工作......谢谢:)

3赞 Clinton Chau 7/10/2020

请注意，虽然此解决方案适用于某些情况，但它不适用于使用嵌套路由来渲染分层布局组件的情况，这是您可以在 v3 中使用嵌套路由做的好事之一。

5赞 ford04 7/1/2020 #8

反应路由器 v6

允许使用嵌套路由（如 v3 中）和单独的拆分路由（v4、v5）。

嵌套路由

将所有路由保存在一个地方，用于中小型应用：

<Routes>
  <Route path="/" element={<Home />} >
    <Route path="user" element={<User />} /> 
    <Route path="dash" element={<Dashboard />} /> 
  </Route>
</Routes>

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        // /js is start path of stack snippet
        <Route path="/js" element={<Home />} >
          <Route path="user" element={<User />} />
          <Route path="dash" element={<Dashboard />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

const Home = () => {
  const location = useLocation()
  return (
    <div>
      <p>URL path: {location.pathname}</p>
      <Outlet />
      <p>
        <Link to="user" style={{paddingRight: "10px"}}>user</Link>
        <Link to="dash">dashboard</Link>
      </p>
    </div>
  )
}

const User = () => <div>User profile</div>
const Dashboard = () => <div>Dashboard</div>

ReactDOM.render(<App />, document.getElementById("root"));

<div id="root"></div>
    <script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/[email protected]/umd/history.production.min.js"></script>
    <script src="https://unpkg.com/[email protected]/umd/react-router.production.min.js"></script>
    <script src="https://unpkg.com/[email protected]/umd/react-router-dom.production.min.js"></script>
    <script>var { BrowserRouter, Routes, Route, Link, Outlet, useNavigate, useLocation } = window.ReactRouterDOM;</script>

替代方法：通过 useRoutes 将您的路由定义为纯 JavaScript 对象。

单独的路线

您可以使用单独的路由来满足大型应用的要求，例如代码拆分：

// inside App.jsx:
<Routes>
  <Route path="/*" element={<Home />} />
</Routes>

// inside Home.jsx:
<Routes>
  <Route path="user" element={<User />} />
  <Route path="dash" element={<Dashboard />} />
</Routes>

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        // /js is start path of stack snippet
        <Route path="/js/*" element={<Home />} />
      </Routes>
    </BrowserRouter>
  );
}

const Home = () => {
  const location = useLocation()
  return (
    <div>
      <p>URL path: {location.pathname}</p>
      <Routes>
        <Route path="user" element={<User />} />
        <Route path="dash" element={<Dashboard />} />
      </Routes>
      <p>
        <Link to="user" style={{paddingRight: "5px"}}>user</Link>
        <Link to="dash">dashboard</Link>
      </p>
    </div>
  )
}

const User = () => <div>User profile</div>
const Dashboard = () => <div>Dashboard</div>

ReactDOM.render(<App />, document.getElementById("root"));

<div id="root"></div>
    <script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/[email protected]/umd/history.production.min.js"></script>
    <script src="https://unpkg.com/[email protected]/umd/react-router.production.min.js"></script>
    <script src="https://unpkg.com/[email protected]/umd/react-router-dom.production.min.js"></script>
    <script>var { BrowserRouter, Routes, Route, Link, Outlet, useNavigate, useLocation } = window.ReactRouterDOM;</script>

0赞 Ashish Kamble 7/2/2020

我认为是旧方法，我喜欢这种方法，我在 AngularJS 中也使用了同样的方式，谢谢RoutesRoute

11赞 mohRamadan 7/2/2020 #9

使用钩子

钩子的最新更新是使用 useRouteMatch。

主路由组件


export default function NestingExample() {
  return (
    <Router>
      <Switch>
       <Route path="/topics">
         <Topics />
       </Route>
     </Switch>
    </Router>
  );
}

子组件

function Topics() {
  // The `path` lets us build <Route> paths 
  // while the `url` lets us build relative links.

  let { path, url } = useRouteMatch();

  return (
    <div>
      <h2>Topics</h2>
      <h5>
        <Link to={`${url}/otherpath`}>/topics/otherpath/</Link>
      </h5>
      <ul>
        <li>
          <Link to={`${url}/topic1`}>/topics/topic1/</Link>
        </li>
        <li>
          <Link to={`${url}/topic2`}>/topics/topic2</Link>
        </li>
      </ul>

      // You can then use nested routing inside the child itself
      <Switch>
        <Route exact path={path}>
          <h3>Please select a topic.</h3>
        </Route>
        <Route path={`${path}/:topicId`}>
          <Topic />
        </Route>
        <Route path={`${path}/otherpath`>
          <OtherPath/>
        </Route>
      </Switch>
    </div>
  );
}

2赞 Devlin Duldulao 8/30/2020 #10

React Router v5 的完整答案。


const Router = () => {
  return (
    <Switch>
      <Route path={"/"} component={LandingPage} exact />
      <Route path={"/games"} component={Games} />
      <Route path={"/game-details/:id"} component={GameDetails} />
      <Route
        path={"/dashboard"}
        render={({ match: { path } }) => (
          <Dashboard>
            <Switch>
              <Route
                exact
                path={path + "/"}
                component={DashboardDefaultContent}
              />
              <Route path={`${path}/inbox`} component={Inbox} />
              <Route
                path={`${path}/settings-and-privacy`}
                component={SettingsAndPrivacy}
              />
              <Redirect exact from={path + "/*"} to={path} />
            </Switch>
          </Dashboard>
        )}
      />
      <Route path="/not-found" component={NotFound} />
      <Redirect exact from={"*"} to={"/not-found"} />
    </Switch>
  );
};

export default Router;

const Dashboard = ({ children }) => {
  return (
    <Grid
      container
      direction="row"
      justify="flex-start"
      alignItems="flex-start"
    >
      <DashboardSidebarNavigation />
      {children}
    </Grid>
  );
};

export default Dashboard;

Github 存储库在这里。https://github.com/webmasterdevlin/react-router-5-demo

7赞 Devlin Duldulao 8/30/2020 #11

React Router v6 或版本 6 的完整答案，以备不时之需。

import Dashboard from "./dashboard/Dashboard";
import DashboardDefaultContent from "./dashboard/dashboard-default-content";
import { Route, Routes } from "react-router";
import { useRoutes } from "react-router-dom";

/*Routes is used to be Switch*/
const Router = () => {

  return (
    <Routes>
      <Route path="/" element={<LandingPage />} />
      <Route path="games" element={<Games />} />
      <Route path="game-details/:id" element={<GameDetails />} />
      <Route path="dashboard" element={<Dashboard />}>
        <Route path="/" element={<DashboardDefaultContent />} />
        <Route path="inbox" element={<Inbox />} />
        <Route path="settings-and-privacy" element={<SettingsAndPrivacy />} />
        <Route path="*" element={<NotFound />} />
      </Route>
      <Route path="*" element={<NotFound />} />
    </Routes>
  );
};
export default Router;

import DashboardSidebarNavigation from "./dashboard-sidebar-navigation";
import { Grid } from "@material-ui/core";
import { Outlet } from "react-router";

const Dashboard = () => {
  return (
    <Grid
      container
      direction="row"
      justify="flex-start"
      alignItems="flex-start"
    >
      <DashboardSidebarNavigation />
      <Outlet />
    </Grid>
  );
};

export default Dashboard;

Github 存储库在这里。https://github.com/webmasterdevlin/react-router-6-demo

1赞 cfranklin 1/7/2021

您能否也在此处包含 DashboardSidebarNavigation？

1赞 mohammad asghari 8/22/2021 #12

我更喜欢使用react函数。此解决方案简短且更具可读性

const MainAppRoutes = () => (
    <Switch>
        <Route exact path='/' component={HomePage} />
        {AdminRoute()}                  
        {SampleRoute("/sample_admin")}  
    </Switch>
);

/*first implementation: without params*/
const AdminRoute = () => ([
    <Route path='/admin/home' component={AdminHome} />,
    <Route path='/admin/about' component={AdminAbout} />
]);

/*second implementation: with params*/
const SampleRoute = (main) => ([
    <Route path={`${main}`} component={MainPage} />,
    <Route path={`${main}/:id`} component={MainPage} />
]);

1赞 sampath kumar 1/7/2022 #13

**This code worked for me with v6**

索引 .js

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<App />}>
          <Route path="login" element={<Login />} />
          <Route path="home" element={<Home />} />
        </Route>
      </Routes>
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

应用 .js：

function App(props) {
  useEffect(() => {
    console.log('reloaded');
// Checking, if Parent component re-rendering or not *it should not be, in the sense of performance*, this code doesn't re-render parent component while loading children
  });
  return (
    <div className="App">
      <Link to="login">Login</Link>
      <Link to="home">Home</Link>
      <Outlet /> // This line is important, otherwise we will be shown with empty component
    </div>
  );
}

登录名 .js：

const Login = () => {
    return (
        <div>
            Login Component
        </div>
    )
};

首页.js：

const Home= () => {
    return (
        <div>
            Home Component
        </div>
    )
};

上一个：SQL Server 中的嵌套 select 语句

下一个：为什么要在 C++ 中使用嵌套类？

使用 react 路由器 v4 / v5 的嵌套路由

Nested routes with react router v4 / v5

评论

评论

评论

评论