Переключение SubRoutes без размонтирования MainRoute (React-Router-Dom) - PullRequest
Новая
       34

Переключение SubRoutes без размонтирования MainRoute (React-Router-Dom)

0 голосов
/ 19 мая 2019

ОБНОВЛЕНИЕ (19 мая 2019 г.): Удаление withRouter из приложения сделало свое дело. Теперь только подпрограммы размонтируют / смонтировать, как ожидается.

Я бы хотел переключаться между подпутями без размонтирования родительского маршрута. (т. е. переход из / home / feed в / home / collection, не должен размонтировать и перемонтировать компонент Home (родительский маршрут); он должен только размонтировать Feed compount и смонтировать компонент Collections.

В приложении: 

<Switch>
  <Route component={home(LandingPage)} path='/' exact />
  <Route component={index(Home)} path='/home' />
  <Route component={index(Browse)} path='/browse' />
  <Route component={index(Social)} path='/social' />
  <Route component={index(Notifications)} path='/notifications' />
  <Route component={index(Profile)} path='/profile/:id' />
  <Route component={index(SinglePost)} path='/status/:id' />
  <Route component={index(Settings)} path='/settings' />
  <Route component={NoMatch} />
</Switch>

В ДОМЕ: 

<Container>
  <Sidebar
    auth={auth}
    user={user}
    posts={posts}
    followers={followers}
    following={following}
    fetchFollowers={fetchFollowers}
    fetchFollowing={fetchFollowing}
  />
  <Wrapper>
    <Tabs>
      <Tab>
        <NavLink exact to='/home/feed'>
          Feed
        </NavLink>
      </Tab>
      <Tab>
        <NavLink to='/home/collections'>Collections</NavLink>
      </Tab>
      <Tab>
        <NavLink to='/home/locker'>Locker(α)</NavLink>
      </Tab>
    </Tabs>
    <TabWrapper>
      <Switch>
        <Route
          exact
          path={['/home', '/home/feed']}
          render={props => (
            <Feed
              {...props}
              auth={auth}
              user={user}
              searchTerm={searchTerm}
              populateNotification={populateNotifications}
            />
          )}
        />
        <Route
          path='/home/collections'
          render={props => (
            <Collections
              {...props}
              userId={auth.id}
              searchTerm={searchTerm}
              posts={posts}
              deletePost={deletePost}
              fetchPosts={fetchPosts}
            />
          )}
        />
        <Route
          path='/home/locker'
          render={props => (
            <Likes
              {...props}
              auth={auth}
              locker={locker}
              fetchUser={fetchUser}
              fetchLocker={fetchLocker}
              likedPosts={likedPosts}
            />
          )}
        />
      </Switch>
    </TabWrapper>
  </Wrapper>
  <Suggested
    auth={auth}
    suggested={suggested}
    fetchUser={fetchUser}
    fetchSuggested={fetchSuggested}
    fetchFollowing={fetchFollowing}
    followAUser={followAUser}
  />
</Container>

Я ожидал, что приложение будет оставаться подключенным во время навигации по подмаршрутам (Feed / Collections), но приложение отключается и перемонтируется при переключении подпутей. Это приводит к тому, что компоненты в приложении, такие как боковая панель и «Предложено», перерисовываются, даже если они находятся за пределами подчиненных маршрутов.

1 Ответ

2 голосов
/ 19 мая 2019

заменить path='/home/collections' во вложенных Route компонентах path={`${match.path}/collections`}

, а также заменить to='/home/collections' в ссылках на to={`${match.url}/collections`}

см. это например

...