reactjs - 嵌套路由不渲染

Question

将尽量简短。

仪表板组件正在渲染，但同时点击 localhost:3000/dashboard/shipments什么都没有渲染。
不精通 react ，不确定是否render={({ location })(Line 1)造成问题。
尝试在 Route (Line2) 中放置组件/简单的 h4 标签但没有任何效果。

Necessary imports are done.

应用程序.js

const pages = [
  {
    pageLink: '/dashboard',
    view: Dashboard,
    displayName: 'Dashboard',
    showInNavbar: true,
    exact: false
  },....more routes.
return(
<Router>
  <Route render={({ location }) => (//---------->Line 1
    <React.Fragment>
      <Navbar />
      <Switch location={location}>
        {pages.map((page, index) => {
          return (
            <Route
              exact={page.exact}
              path={page.pageLink}
              component={page.view}
              key={index}
            />
          )
        })}
        <Redirect to='/' />
      </Switch>
    </React.Fragment>
  )}
  />
</Router>
)

仪表板.js

export default function Dashboard() {
    const authedUser = useSelector(state => state.authedUser);
    let { path } = useRouteMatch();
    if (!authedUser.loggedIn) return <Redirect to='/login' />
    return (
        <React.Fragment>
            <section id='dashboard-component'>
                <Sidebar />
                <Switch>
                    <Route exact path={path}>
                        <h2>Dashboard</h2>
                    </Route>
                    <Route exact path={`/${path}/shipments`}><h4>sdsd</h4></Route>//------>Line 2
                </Switch>
            </section>
        </React.Fragment>
    )
}

Answer 1

你有一个额外的 /在嵌套路由的开头

<Route exact path={`/${path}/shipments`}><h4>sdsd</h4></Route>

现在 path已经返回 /dashboard .写作 path={`/${path}/shipments`} 将使路由路径为 路径={'//仪表板/发货'}

您需要指定您的子路线，例如

<Route exact path={`${path}/shipments`}><h4>sdsd</h4></Route>

Working demo