React Router v4嵌套路由与通配符路由冲突问题求解

嘿，这个问题在React Router开发里挺常见的，核心原因是路由的匹配优先级规则——React Router是从上到下依次匹配路由的，当你把/:username这种通配符路由放在/self前面时，它会把self当成一个用户名参数，自然就和你的仪表盘路由冲突了。

解决方法其实很简单，只需要调整一下路由的定义顺序就行：

• 把固定路径的/self路由放在通配符/:username路由的前面

举个外层路由配置的例子：

import { BrowserRouter as Router, Route } from 'react-router-dom';
import Self from './Self';
import UserProfile from './UserProfile';

function App() {
  return (
    <Router>
      {/* 优先匹配固定的 /self 路由 */}
      <Route path="/self" component={Self} />
      {/* 通配符路由放在后面，只有前面的路由都不匹配时才会触发 */}
      <Route path="/:username" component={UserProfile} />
    </Router>
  );
}

你提供的Self组件写法本身是没问题的，它内部的子路由（比如/self/test）会在/self路由匹配成功后，由组件内部的Route处理，完全不会和/: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>
  );
}

额外小提示：以后遇到类似的固定路径和通配符路由冲突的情况，都可以遵循这个「固定路径优先」的原则，把精确匹配的路由放在通配符路由前面，就能完美解决这类问题啦～

内容的提问来源于stack exchange，提问作者totalnoob