React18中React-router-dom组件无法渲染，/editor路径报404错误求助

1. 修正Router组件的使用 #

React Router v6中，Router是基础路由组件，需手动传入history对象，日常开发应使用封装好的BrowserRouter。确保根组件代码正确导入并使用BrowserRouter：

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

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Router>
    <App />
  </Router>
);

2. 移除冗余的exact属性 #

React Router v6已移除exact属性，路由默认采用精确匹配逻辑，保留该属性无实际作用。修改路由配置代码：

<Fragment>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/editor" element={<EditorPad />} />
    <Route path="*" element={<Navigate to="/" />} />
  </Routes>
</Fragment>

3. 配置开发服务器的History API Fallback #

访问/editor出现404是因为开发服务器无法找到对应物理文件，需配置服务器将所有请求重定向到index.html，让React Router接管路由处理：

若使用webpack-dev-server #

在webpack.config.js的devServer中添加配置：

module.exports = {
  // ...其他配置
  devServer: {
    historyApiFallback: true,
  },
};

若使用Vite #

在vite.config.js中添加配置：

export default {
  server: {
    historyApiFallback: true,
  },
};

若使用Create React App #

该配置已默认启用，无需额外修改，重启开发服务器即可。

完成以上步骤后，重启开发服务器，再次访问http://localhost:8080/editor即可正常渲染组件。

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