嵌套路由不渲染

Question

会尽量简短。

仪表板组件正在渲染，但在点击localhost:3000/dashboard/shipments 时没有渲染。
不熟悉反应，不确定render={({ location })(Line 1) 是否引起问题。
尝试在Route (Line2) 中放置组件/仅使用 h4 标签，但没有任何效果。

已完成必要的导入。

App.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>
)

dashboard.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`} 将使路由路径为 path={'//dashboard/shipments'}

你需要指定你的子路由

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

Working demo