如何在React Vite中配置React Router Dom并自定义路由路径

在React项目里自定义路由路径，最标准的方案就是基于React Router Dom来配置，完全可以自主定义任意路径，不需要依赖默认生成的路由。以下是具体实现步骤：

1. 安装React Router Dom #

如果项目还没安装依赖，先执行安装命令：

npm install react-router-dom
# 或者用yarn
yarn add react-router-dom

2. 创建集中式路由配置文件 #

建议在src目录下新建routes.js，把自定义路径和对应的页面组件做映射，这样后期维护路由更方便：

// src/routes.js
import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';

// 自定义路由映射表
export const routes = [
  {
    path: '/my-custom-home', // 自定义首页路径
    element: <HomePage />
  },
  {
    path: '/about-our-team', // 自定义关于页路径
    element: <AboutPage />
  }
];

3. 在App.js中挂载路由 #

用BrowserRouter包裹路由容器，遍历路由配置来渲染所有自定义路由：

// src/App.js
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { routes } from './routes';

function App() {
  return (
    <Router>
      {/* 这里可以加全局导航组件 */}
      <Routes>
        {/* 遍历自定义路由配置 */}
        {routes.map((route, idx) => (
          <Route key={idx} path={route.path} element={route.element} />
        ))}
        {/* 可选：添加404页面 */}
        <Route path="*" element={<div>页面未找到</div>} />
      </Routes>
    </Router>
  );
}

export default App;

4. 自定义导航链接 #

如果需要页面跳转，用Link组件指定自定义路径即可：

// 比如在components下新建Navigation.js
import { Link } from 'react-router-dom';

export default function Navigation() {
  return (
    <nav style={{ padding: '1rem' }}>
      <Link to="/my-custom-home" style={{ marginRight: '1rem' }}>首页</Link>
      <Link to="/about-our-team">关于我们</Link>
    </nav>
  );
}

额外注意事项 #

• 路由路径支持动态参数，比如/user/:userId，在页面组件中可以用useParams()钩子获取参数值
• 如果项目是静态部署（比如部署到GitHub Pages、Nginx），需要配置服务器重定向规则，确保刷新自定义路径时不会返回404

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