反应路由器V4与通配符路线冲突的嵌套路线

Question

我有一个应用程序，您可以在其中访问用户的配置文件/someSername现在，我试图简单地a/self dashboard组件，在这些组件中，人们可以得到/self/test或//self/其他东西，但这与用户路由的矛盾是/：用户名。我该如何解决？

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>中。然后将路线按顺序排列，您要首先要匹配的路线。