React Router v5默认路由无法跳转至首页问题求助

针对你遇到的根路径无法自动跳转至首页的问题，可按以下步骤排查修复：

1. 确保正确导入重定向组件 #

在你的Routes.js文件顶部，确认已导入Redirect组件：

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

2. 调整路由配置顺序与规则 #

React Router v5的Switch组件会按顺序匹配第一个符合条件的路由，因此根路径的重定向规则必须放在所有路由的最前面，并且添加exact属性避免拦截其他子路由。示例配置如下：

<Switch>
  {/* 根路径精确匹配，跳转到首页 */}
  <Redirect exact from="/" to="/home" />
  {/* 其他业务路由 */}
  <Route path="/home" component={HomeLayout} />
  <Route path="/about-us" component={AboutUs} />
  <Route path="/contact-us" component={ContactUs} />
  {/* 404页面路由放在最后 */}
  <Route component={NotFound} />
</Switch>

如果之前的配置中没有添加exact，根路径会匹配所有以/开头的路由（如/about-us），导致重定向逻辑失效。

3. 验证根组件的路由包裹 #

检查Index.js中是否用BrowserRouter正确包裹了路由组件，这是路由生效的前提：

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import Routes from './Routes';

ReactDOM.render(
  <Router>
    <Routes />
  </Router>,
  document.getElementById('root')
);

4. 排查导航栏链接问题 #

确认Navbar.js中的首页导航链接指向/home而非根路径，避免出现循环跳转的情况：

<Link to="/home">首页</Link>

按照以上步骤调整后，根路径/应该会自动跳转至/home页面，同时不影响其他路由的正常访问。

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