React配置react-router-dom报错Cannot read property 'pathname' of undefined如何解决

直接使用了react-router-dom导出的底层Router组件，未传入必填的history属性，导致路由内部读取路径属性时找不到对应对象，触发pathname未定义报错。

方案一：使用封装好的高阶路由组件（优先选择） #

将导入的Router替换为BrowserRouter即可，该组件内部已自动封装history实例，无需手动传递。
修改后完整代码：

import React from 'react'
// 将Router替换为BrowserRouter，重命名为Router即可不修改后续代码
import {BrowserRouter as Router, Route} from 'react-router-dom';
import Header from './components/Header';
import Home from './views/Home.js'
import Register from './views/Register.js'

const App = () => {
  return (
    <Router>
      <Header/>
      <Route path="/register" component={Register} />
      <Route path="/" component={Home} exact />
    </Router>
  );
}

export default App;

如果需要哈希模式路由，替换为HashRouter即可，用法一致。

方案二：手动传入history实例 #

如果有自定义history的需求，要手动创建实例传入底层Router组件：

1. 安装对应版本的history依赖，react-router-dom v5对应history v4版本，避免版本不兼容：
   npm install history@4.10.1
2. 修改代码：

import React from 'react'
import {Router, Route} from 'react-router-dom';
import { createBrowserHistory } from 'history'
import Header from './components/Header';
import Home from './views/Home.js'
import Register from './views/Register.js'

// 手动创建history实例
const customHistory = createBrowserHistory()

const App = () => {
  return (
    <Router history={customHistory}>
      <Header/>
      <Route path="/register" component={Register} />
      <Route path="/" component={Home} exact />
    </Router>
  );
}

export default App;

你当前的代码写法是react-router-dom v5的语法，若升级到v6版本，路由组件用法会有调整，按上述方案修改v5版本代码可直接解决当前报错。

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