Question

我正在使用React路由器并尝试设置两个不同的视图：

第一个Home左侧有一个用户头像，然后根据不同的网址，图片旁会显示不同的视图。

这很好用，如下所示：

 ------------------
|       ||         |
| IMAGE || CONTENT |      
|       ||         |
 ------------------

然而，我遇到的问题是当我尝试导航到pullrequests路线时。请参阅下面的App组件。

在这种情况下，我只想显示PullRequests组件，如此

 --------------
|              |
| PULLREQUESTS |       
|              |
 --------------

见下面的代码：

const Home = () => {
  return (
   <ProfileContainer>

    <div className='left-side'>
     <img src={ avatarUrl }/>
    </div>

    <div className='right-side'>
      <InformationContainer>
        <Route exact path="/" component={Repositories}/>
        <Route path="/followers" component={Followers}/>
        <Route path="/following" component={Following}/>
        <Route path="/stars" component={Stars}/>
      </InformationContainer>
    </div>
  </ProfileContainer>
  );
};

const App = () => {

  return (
    <section> 
      <Switch>
        <Route path="/" render={()=><Home />}/>
        <Route path="/pullrequests" component={PullRequests}/>
      </Switch>
    </section>
  )
}

Answer 1

Switch匹配第一条路线并忽略所有后来的路线，因此您需要更改路线的顺序，因为/pullRequests也会匹配/

const App = () => {

  return (
    <section> 
      <Switch>
        <Route path="/pullrequests" component={PullRequests}/>
        <Route path="/" render={(props)=><Home {...props}/>}/>
      </Switch>
    </section>
  )
}

路由器反应路由器显示不同的视图

1 个答案: