React-router. Проблема с разметкой, другие маршруты не видны - PullRequest
0 голосов
/ 10 января 2020

У меня есть 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>
    </>

Ответы [ 2 ]

1 голос
/ 11 января 2020

См. Следующий рабочий пример соответствующих комментариев https://stackblitz.com/edit/react-qu6hkq

0 голосов
/ 10 января 2020

Изменить

{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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...