多个页面中的 React Router 路由顺序

Question

我尝试学习 React Router 并使用多个页面。我的页面结构如下。

|_Login
|_Main
  |_Home
  |_Agenda
|_Admin
  |_Main
  |_Settings

为此，我找到了一个示例，它有效

<Router>
<Switch>
    <Route exact path="/"><LoginPage /></Route>
   
    <Route path='/admin/:path?' exact>             
            <Switch>
                <PrivateRoute path='/admin'><AdminMain/></PrivateRoute>
                <PrivateRoute path='/admin/setting'><AdminSettings/></PrivateRoute>
            </Switch>
    </Route>
    
    <Route>
        <Switch>
            <Route exact path="/login"><LoginPage /></Route>
            <PrivateRoute path="/home"><HomePage /></PrivateRoute>
            <PrivateRoute path="/agenda"><AgendaPage /></PrivateRoute>
        </Switch>
    </Route>
</Switch>
</Router>

通过这个订单，我可以导航到其他页面

<div>
    <ul>
        <li>
            <Link to="/admin">Admin</Link>
        </li>
        <li>
            <Link to="/agenda">Agenda</Link>
        </li>
        <li>
            <Link to="/home">Home</Link>
        </li>
    </ul>
</div>

但是如果我更改顺序并在下一条路线下写管理路线...

<Router>
    <Switch>
        <Route exact path="/"><LoginPage /></Route>
    
        <Route>
            <Switch>
                <Route exact path="/login"><LoginPage /></Route>
                <PrivateRoute path="/home"><HomePage /></PrivateRoute>
                <PrivateRoute path="/agenda"><AgendaPage /></PrivateRoute>
            </Switch>
        </Route>
    
    **<Route path='/admin/:path?' exact>             
                <Switch>
                    <PrivateRoute path='/admin'><AdminMain/></PrivateRoute>
                    <PrivateRoute path='/admin/setting'><AdminSettings/></PrivateRoute>
                </Switch>
        </Route>**
    
    </Switch>
</Router>

...我无法导航到管理页面。那么顺序对于路由很重要吗？如果是，我该如何订购我的路线？

我找到了示例here
现场演示是here

react-router-dom 版本 5.2.0

Answer 1

这是因为没有path 属性的<Route> 将始终匹配。因此，如果您将 Route 不带 path 放在第一个 react-router 将始终转到此路由并忽略后面的其他路由。