路由器v4与嵌套路由冲突，与通配符路由冲突

Question

我有一个应用程序，您可以通过/ someusername访问用户的个人资料 现在我试图简化一个/自我仪表板组件，其中一个人可以转到/自我/测试或/ self /其他东西，但这与用户路由是冲突的，即/：username。我该如何解决这个问题？

function Self({ match }) {
    return (
        <main> 
            <aside>
                <Link to={`${match.url}/test`}>Friends</Link>
            </aside>
            <article>
                <section>
                    <Route path={`${match.path}/:tab`} component={Test} />
                </section>
            </article>
        </main>
  );
}

class App extends React.Component {
    render() {
        return (
            <Router>
                <Switch>             
                    <Route path="/self" exact={true} component={Self} />
                    <Route path="/:username" component={User} />  
                </Switch>
            </Router>
    );
  }
}

Answer 1

您可以将路由包裹在<Switch></Switch>中。然后将路线放在一个顺序中，首先要匹配的路线首先出现。