兄弟路由在reactjs中不起作用

Question

我有一个名为 Profile 的组件，它有两个子组件 时间轴和朋友。

我可以像这样从任何其他组件路由到配置文件内的时间线组件：

<Link to={{ pathname: '/dashboard/profile/timeline/'+userId}}></Link> 

但是一旦我在这个 url 中，之后如果我想路由到朋友部分，它是时间线的兄弟，我尝试在 Profile 组件中使用它来路由

<Route path="/dashboard/profile/:screenId/:userId" component={this.Routing}/>

路由函数在哪里

Routing =({ match })=>{
    switch(match.params.screenId){
        case "timeline": return <Timeline/>;
        case "friends": return <Friends/>
        default : return <NoMatch/>;
    }
}

但问题是它不起作用，当我点击导航链接时没有触发路由功能

<NavLink to={'/dashboard/profile/'  + (tab.url) + '/' + userId} activeClassName="selectedTab">
   <div>{tab.name}</div>
</NavLink>

此导航链接位于 Profile 组件中。任何帮助将不胜感激。

Answer 1

您需要将 Router 属性传递给组件才能进行路由

Routing =({ match, ...rest })=>{
    switch(match.params.screenId){
        case "timeline": return <Timeline match={match} {...rest}/>;
        case "friends": return <Friends match={match} {...rest}/>
        default : return <NoMatch match={match} {...rest}/>;
    }
}