路由器布局问题,看不到其他路由



我有 3 个组件 LandingPageLayout,LoginLayout,UserLayout.我正在尝试从主页(登陆(导航到用户/编辑或任何与用户相关的路由,它将我带到 404 页面,而其他路由还可以。我的状态是登录=真,基本上是登录。

//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>
</>

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

更改

{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

最新更新