使用material-ui与react-router-dom时出现偶发路由未找到问题

这个问题我之前也碰到过，核心原因是自定义history实例与react-router的上下文不匹配，咱们一步步拆解：

为什么会触发NoMatch？ #

当你手动调用createBrowserHistory()创建history实例并传给Router组件时，react-router-dom的导航组件（比如你用的NavLink）默认会使用它内部自动创建的history上下文，而不是你手动传入的那个。这就造成了一个矛盾：

• 点击NavLink时，跳转动作是基于内部的history实例；
• 但路由匹配逻辑是基于你自定义的history实例；
  两者不同步，导致Router无法正确识别当前的路径，直接命中了最后那个没有path限制的NoMatch路由。

而location出现嵌套结构的原因也在这里：此时NoMatch接收到的location是外层路由上下文的对象，实际的路由路径信息被嵌套在了location.location里——这是两个history上下文冲突的典型表现。

怎么解决？ #

方案1：确保所有组件共享同一个history实例 #

如果你确实需要自定义history（比如要手动监听历史变化、直接调用history.push等），要保证整个应用的路由上下文统一：

1. 把自定义history抽成单独的模块导出：

   // src/history.js
   import { createBrowserHistory } from 'history';
   export const history = createBrowserHistory();
   

2. 在Router中传入这个实例：

   import { Router, Switch, Route, Redirect } from 'react-router-dom';
   import { history } from './history';
   
   <Router history={history}>
     <Switch>
       <Route path="/register" component={RegistrationPage} />
       <Route path="/login" component={LoginPage} />
       <Redirect to="/page-not-found" />
       <Route path="/page-not-found" component={NoMatch} />
     </Switch>
   </Router>
   

3. 确保所有导航组件（NavLink、Link等）都在这个Router的上下文范围内，它们会自动从上下文获取正确的history实例，不会再出现冲突。

方案2：直接使用BrowserRouter（推荐） #

你已经发现换成BrowserRouter问题就消失了——这是因为BrowserRouter内部已经帮你创建并维护了一个全局统一的history实例，所有路由相关组件都会自动共享这个实例，从根源上避免了上下文冲突。如果你的项目没有特殊的自定义history需求，这是最简单可靠的方案：

import { BrowserRouter as Router, Switch, Route, Redirect } from 'react-router-dom';

<Router>
  <Switch>
    <Route path="/register" component={RegistrationPage} />
    <Route path="/login" component={LoginPage} />
    {/* 先重定向未匹配的路径到404页面 */}
    <Redirect to="/page-not-found" />
    {/* 匹配404页面 */}
    <Route path="/page-not-found" component={NoMatch} />
  </Switch>
</Router>

小提示：原来的路由配置里，Redirect放在了NoMatch后面，这样永远不会触发重定向——因为Switch会匹配第一个符合条件的路由，而无path的Route会匹配所有路径。所以要把Redirect放在NoMatch前面，或者给NoMatch指定明确的path。

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