react-router-dom v5使用Link报Router嵌套错误、useNavigate无效如何解决

嵌套Router报错修复 #

报错根因：Home.js中导入Link的代码写错，你将BrowserRouter重命名为Link使用，实际渲染的<Link>组件就是第二个Router，触发嵌套限制。
修复代码：将Home.js的对应导入行替换为：

import { Link } from 'react-router-dom';

修改后即可正常使用Link组件跳转，不会再触发嵌套Router报错。

useNavigate不存在报错修复 #

报错根因：useNavigate是react-router-dom v6版本新增的API，v5版本没有该钩子，v5版本的编程式导航统一使用useHistory钩子实现。
修复步骤：

1. 替换导入语句：

// 删除 import { useNavigate } from 'react-router-dom'
import { useHistory } from 'react-router-dom'

2. 调整调用逻辑：

function Modal() {
  const history = useHistory();
  const playAgain = () =>{
    history.push("/");
  }
  // 其余逻辑不变
}

App.js 兼容修复 #

你当前App.js使用的是v6版本的Routes、element属性，在v5版本下无法正常运行，需要调整为v5的语法：

import './App.css';
import SpiderSolitaire from './Pages/SpiderSolitaire';
import Home from './Components/Home/Home';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home}/>
        <Route path="/game" component={SpiderSolitaire}/>
      </Switch>
    </Router>
  );
}
export default App;

其他跳转实现方式 #

如果是类组件无法使用钩子，可以用withRouter高阶组件包裹组件，获取history对象实现跳转：

import { withRouter } from 'react-router-dom'

class MyComponent extends React.Component {
  jump = () => {
    this.props.history.push('/target')
  }
}

export default withRouter(MyComponent)

内容的提问来源于stack exchange，提问作者Mehmet Can BOZ