React.js：如何正确配置默认首页重定向？

看起来你在React Router的重定向配置上踩了几个常见的坑，我帮你梳理下问题和正确的实现方式：

问题根源 #

你的重定向没生效主要有3个原因：

1. React Router（不管v5还是v6）都不支持在路由对象里直接写redirect属性，这不是合法的配置方式；
2. 渲染路由时没有使用Switch（v5）或Routes（v6）组件，导致路由默认模糊匹配，访问/时会同时触发/和/home的路由渲染，引发冲突；
3. extract:"true"是无效属性，React Router的Route组件没有这个props，直接删掉就行。

方案一：React Router v5 版本实现 #

如果你用的是v5版本（react-router-dom@5），按以下步骤修改：

1. 修正路由配置

把根路径的路由单独配置，用Redirect组件实现重定向，同时加上exact: true确保严格匹配：

import { Redirect } from 'react-router-dom';

const routes = [
  { path: "/", exact: true, render: () => <Redirect to="/home" /> },
  { path: "/home", component: Home },
  { path: "/service", component: Service }
];

2. 用Switch包裹路由组件

必须用Switch包裹所有Route，这样只会匹配第一个符合条件的路由，避免冲突：

// 注意：推荐用BrowserRouter代替基础Router，需要引入对应组件
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';

<div>
  <Router>
    <Header />
    <Switch>
      {routes.map((route) => (
        <Route 
          key={route.path} 
          path={route.path} 
          exact={route.exact}
          component={route.component}
          render={route.render}
        />
      ))}
    </Switch>
  </Router>
</div>

方案二：React Router v6 版本实现 #

如果是目前主流的v6版本，写法有较大变化，Redirect被Navigate替代，同时必须用Routes包裹Route：

1. 修正路由配置

import { Navigate } from 'react-router-dom';

const routes = [
  { path: "/", element: <Navigate to="/home" replace /> }, // replace避免回退到根路径
  { path: "/home", element: <Home /> },
  { path: "/service", element: <Service /> }
];

2. 用Routes包裹路由组件

v6里必须用Routes代替v5的Switch，且Route的component属性换成element：

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

<div>
  <Router>
    <Header />
    <Routes>
      {routes.map((route) => (
        <Route 
          key={route.path} 
          path={route.path} 
          element={route.element}
        />
      ))}
    </Routes>
  </Router>
</div>

额外提示 #

• v5版本的exact属性一定要加，否则/会匹配所有以/开头的路由，导致重定向逻辑混乱；
• v6版本默认是严格匹配，不需要额外加exact，配置更简洁；
• 加上replace属性（v6的Navigate或v5的Redirect），可以让重定向后浏览器历史记录里不保留原根路径，用户点击回退按钮不会回到/，体验更好。

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