Question

将尽量简短。

仪表板组件正在渲染，但是在命中localhost:3000/dashboard/shipments时没有渲染。
不熟悉反应，不确定render={({ location })(Line 1)是否引起问题。
试图将组件/仅将h4标签放置在Route (Line2)中，但无济于事。

已完成必要的导入。

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

在嵌套路线的开头，您有一个额外的id_1

现在<Route exact path={`/${path}/shipments`}><h4>sdsd</h4></Route>已返回path。编写 path = {`/ $ {path} / shipments`} 将使路径变为 path = {'// dashboard / shipments'}

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

/dashboard

Working demo

嵌套路线未渲染

1 个答案: