在create-react-app中能否不eject使用React Router的<Router />组件？

完全可以无需执行 eject 操作，就能在 create-react-app 项目中正常使用 React Router 的 <Router /> 组件，eject 不是使用 React Router 的前置条件。

具体实现流程 #

• 第一步：安装对应版本的 React Router 依赖
  如果你使用的是包含 <Switch> 组件的 v5 版本，执行命令：
  npm install react-router-dom@5
  如果你使用最新的 v6 版本（v6 已用 <Routes> 替换了 <Switch> 组件），执行命令：
  npm install react-router-dom
• 第二步：修改入口文件 src/index.js 配置
  create-react-app 默认的 ReactDOM.render 逻辑确实都在 src/index.js 中，你只需要将 <Router> 组件作为根组件的外层包裹即可，不需要修改任何 CRA 内置配置。

React Router v5 代码示例（匹配你提到的 <Switch> 用法） #

以下是 src/index.js 的参考写法：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import NotFound from './pages/NotFound';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="*" component={NotFound} />
      </Switch>
    </Router>
  </React.StrictMode>
);

你也可以将 <Switch> 和具体路由规则抽离到 App.js 或单独的路由配置文件中，只需要保证所有路由相关组件都在 <Router> 的子级范围内即可。

React Router v6 适配写法参考 #

如果你使用的是最新的 v6 版本，对应代码调整如下：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import NotFound from './pages/NotFound';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </Router>
  </React.StrictMode>
);

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