Question

更新（2019年5月19日）：：从App中删除withRouter可以达到目的。现在，只有子路由可以按预期方式卸载/装载。

我想在子路由之间切换而不卸载父路由。（即，从/ home / feed到/ home / collections不应卸载并重新安装Home组件（父路线）；它仅应卸载Feed compount并安装Collections组件。

在APP中：

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

我希望App在导航子路由（Feed / Collections）时保持挂载状态，但是在切换子路由时App正在卸载并重新挂载。这会导致应用程序中的组件（如补充工具栏和建议的组件）重新呈现，即使它们位于子路由之外。

Answer 1

在path='/home/collections'的嵌套Route组件中替换path={`${match.path}/collections`}

，并且还将链接中的to='/home/collections'替换为to={`${match.url}/collections`}

例如参见this

在不卸载MainRoute的情况下切换子路由（React-Router-Dom）

1 个答案: