reactjs - React Router 路径不正确？

Question

我正在尝试使用 react router v5 构建一些路由，基本上我有一个布局(Dashboard 和这个 dashboard 有一些路由。)所以如果我做 '/dashboard' 它不起作用'。 '/dashboard' 来 self 在最后一段代码中映射的路线，它基本上位于 AppContent 内部，这是布局，不确定我在这里遗漏了什么......

我的 App.js 文件

<Router>
                    <Switch>
                        <Route
                            exact
                            path="/"
                            name="Home"
                            render={(props) => <DefaultLayout {...props} />}
                        />
                        <Route
                            path="/login"
                            name="Login Page"
                            render={(props) => <Login {...props} />}
                        />
                        <Route
                            path="/register"
                            name="Register Page"
                            render={(props) => <Register {...props} />}
                        />

                        <Route
                            path="*"
                            name="Page 404"
                            render={(props) => <Page404 {...props} />}
                        />
                    </Switch>
                </Router>

    my DefaultLayout File:


 <div>
            <AppSidebar />
            <div className="wrapper d-flex flex-column min-vh-100 bg-light">
                <AppHeader />
                <div className="body flex-grow-1 px-3">
                    <AppContent />
                </div>
                {/* <AppFooter /> */}
            </div>
        </div>

my AppContentFile:

    <Router>
                    <Switch>
                        {routes.map(
                            (route) =>
                                route.component && (
                                    <Route
                                        key={route.name}
                                        path={route.path}
                                        exact={route.exact}
                                        name={route.name}
                                        render={(props) => (
                                            <route.component {...props} />
                                        )}
                                    />
                                )
                        )}
                        <Redirect to="/" />
                    </Switch>
                </Router>

Answer 1

问题

home "/" 路径上的 exact 属性必然会阻止它匹配任何嵌套的路由路径。换句话说，当路径为 "/dashboard" 时，它现在不再完全匹配 "/" 并且呈现内容的布局组件是卸载，卸载任何潜在的路线。它应该被删除。

您还只需要一个路由器组件来为整个应用程序提供路由上下文，因此请删除 AppContent 中无关的 Router。

还记得在 Switch 组件中，路径顺序和特异性很重要，因此请将您的路径从更具体到更不具体。

应用

<Router>
  <Switch>
    <Route path="/login" name="Login Page" component={Login} />
    <Route path="/register" name="Register Page" component={Register} />
    <Route
      path="/" // <-- can now match sub-routes
      name="Home"
      component={DefaultLayout}
    />
    <Route name="Page 404" component={Page404} />
  </Switch>
</Router>

AppContent - 移除Router

<Switch>
  {routes.map((route) =>
    route.component && (
      <Route
        key={route.name}
        path={route.path}
        exact={route.exact}
        name={route.name}
        render={(props) => (
          <route.component {...props} />
        )}
      />
    )
  )}
  <Redirect to="/" />
</Switch>