React Router 404错误重定向问题技术求助

嘿，看你用的是React Router v5的写法（从<Route component={...}的语法能看出来），要搞定404页面的兜底处理其实很简单，只需要在所有路由的最后加一条匹配任意路径的规则，用来捕获所有没匹配到的请求，要么直接渲染404组件，要么重定向到专门的404页面就行。

步骤1：先准备一个404组件（如果还没写的话） #

先写个简单的404页面组件，示例如下：

const NotFound = () => (
  <div className="not-found">
    <h1>404 - 页面未找到</h1>
    <p>抱歉，你访问的页面不存在哦</p>
    {/* 可以加个返回首页的链接 */}
    <Link to="/">回到首页</Link>
  </div>
);

步骤2：在路由列表末尾添加兜底路由 #

React Router是从上到下按顺序匹配路由的，所以这条兜底路由一定要放在所有已定义路由的最后，不然会把前面的合法路由给拦截掉。

修改后的App.js代码大概是这样：

const App = () => (
  <div className="App">
    <MediaQuery minWidth={700}>
      {(matches) => {
        if (matches) {
          return (
            <Router>
              <div>
                <Headroom>
                  <Header />
                </Headroom>
                <main>
                  <Route exact path='/' component={homepage} />
                  <Route path='/home' component={homepage} />
                  <Route path='/OurPubs' component={OurPubs} />
                  {/* 其他已有的路由都放在这里 */}
                  {/* 👇 404兜底路由，必须放在最后 */}
                  <Route path="*" component={NotFound} />
                  
                  {/* 如果你想重定向到专门的/404路径，也可以这么写： */}
                  {/* <Route path="*">
                    <Redirect to="/404" />
                  </Route> */}
                  {/* 这种情况要额外加一条对应/404的路由： */}
                  {/* <Route path="/404" component={NotFound} /> */}
                </main>
              </div>
            </Router>
          );
        }
        // 这里可以补充屏幕宽度小于700时的移动端布局逻辑
        return <div>移动端页面内容...</div>;
      }}
    </MediaQuery>
  </div>
);

几个要注意的点 #

• 兜底路由path="*"必须是最后一个，不然会覆盖前面的合法路由，导致那些页面打不开。
• 如果用Redirect的方式，一定要先定义好/404对应的路由组件，不然会陷入无限重定向的循环。
• 如果你的项目用的是React Router v6，写法会有点不同（比如用Routes包裹，element替代component，用Navigate组件做重定向），不过从你的代码来看应该是v5，上面的方案完全适用。

要是还有其他问题，比如移动端路由的处理或者组件导入的问题，随时说哈～

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