React Router仅匹配'/'路由问题排查（附代码示例）

我帮你梳理下可能导致这个问题的核心原因，以及对应的解决办法：

1. 组件定义方式完全错误 #

你写的App函数组件里用Object.create(React.Component.prototype)手动创建实例的方式，完全不符合React函数组件的规范！函数组件不需要这么绕，直接返回JSX即可。这种错误写法会导致组件无法正确挂载，路由自然无法正常工作。

修正后的标准写法：

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import { ReportList } from './reportList'
import { NewReportForm } from './newReportForm'

export function App(){
  // 直接返回JSX，无需手动创建Component实例
  return ( 
    <Router > 
      <Switch>
        <Route path="/get" component={ReportList} />
        <Route path="/add" component={NewReportForm} />
        {/* 如果需要根路由，记得加上exact属性 */}
        <Route path="/" exact component={HomeComponent} />
      </Switch>
    </Router>
  )
}

2. 根路由未添加exact属性（若存在根路由） #

如果你的代码里实际有根路由/但没加exact，React Router的前缀匹配规则会让/匹配所有以/开头的路径（比如/get、/add），而Switch组件只会渲染第一个匹配的路由，这就导致后面的路由永远不会被触发。

解决办法：给根路由加上exact属性，确保只有当路径完全等于/时才匹配：

<Route path="/" exact component={HomeComponent} />

3. 组件导入方式不匹配 #

检查ReportList和NewReportForm的导出方式：

• 如果组件里用的是export default ReportList（默认导出），那么导入应该写成import ReportList from './reportList'，而不是带大括号的命名导入。
• 如果是命名导出（export const ReportList = ...），那你当前的导入方式是正确的。

导入错误会导致组件无法渲染，看起来就像是路由没匹配到。

4. React Router版本不兼容 #

如果你用的是React Router v6，v5的Switch和component属性写法已经被废弃，需要改用Routes组件和element属性：

v6版本的正确写法：

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import { ReportList } from './reportList'
import { NewReportForm } from './newReportForm'

export function App(){
  return ( 
    <Router > 
      <Routes>
        <Route path="/get" element={<ReportList />} />
        <Route path="/add" element={<NewReportForm />} />
        <Route path="/" element={<HomeComponent />} />
      </Routes>
    </Router>
  )
}

你可以查看package.json里的react-router-dom版本号，对应调整写法即可。

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