Question

我有3个组件LandingPageLayout，LoginLayout，UserLayout。我正尝试从主页（着陆）导航到用户/编辑或任何与用户相关的路线，从而将我引导至404页面，而其他路线还可以。 status isLoggedIn = true，基本已登录。

//main router
    <Fragment>
      <Switch>
        <Route path='/' exact render={props => <LandingPageLayout {...props}></LandingPageLayout>}></Route>
        <Route path='/login' exact render={props => <LoginLayout {...props}></LoginLayout>}></Route>
        <Route path='/offers' exact render={props => <RentOffersLayout {...props}></RentOffersLayout>}></Route>
        {isLoggedIn && <Route path='/user/id' exact render={props => <UserLayout {...props}></UserLayout>}></Route>}
        <Route component={PageNotFound}></Route>
      </Switch>
      <MobBtn></MobBtn>
    </Fragment>

//userlayout
    <>
      <Nav></Nav>
      <div className='profileWrapper'>
        <ProfileNav></ProfileNav>
        <Switch>
          <Route exact path={`${match.url}`} component={Profile}></Route>
          <Route path={`${match.path}/edit`} component={EditProfile}></Route>
          <Route path={`${match.path}/saved`} component={Saved}></Route>
          <Route path={`${match.path}/for-sale`}></Route>
        </Switch>
      </div>
      <Footer></Footer>
    </>

Answer 1

请参见以下工作示例的相应注释 https://stackblitz.com/edit/react-qu6hkq

Answer 2

更改

{isLoggedIn && <Route path='/user/id' exact render={props => <UserLayout {...props}></UserLayout>}></Route>}

到

{isLoggedIn && <Route path='/user/:id' exact render={props => <UserLayout {...props}></UserLayout>}></Route>}

因为id是要使用的路线的参数

您可以在此处了解更多信息-> https://reacttraining.com/react-router/web/example/url-params

这是假设您实际上是在将值作为id参数传递给URL

React-router。布局问题，看不到其他路线

2 个答案: