问题

Question

React router dom 抛出无效的钩子调用，无法读取 null 的属性等

2022-07-15

314

javascript reactjs react-router react-router-dom

import './interface/App.css';
import { Home } from './interface/home';
import { Router, Route, Routes } from 'react-router-dom';

function App() {
  return ( 
    <div>
      <Router>
        <div>
          <Route exact path='/' component={Home}></Route>
        </div>
      </Router>
    </div>
  );

这会引发

我不知道为什么，我当时正在关注一些教程并失败了。我尝试使用 <Home/> 代替 Home，我更新了所有软件包，包括 react 、 react-dom 、 react-router-dom 。

知道为什么会发生这种情况吗？

Answer 1

问题

您正在使用 react-router-dom@6 并使用低级 Router ，而您应该导入并使用高级路由器之一（ BrowserRouter 、 MemoryRouter 等 ）并且您正在使用 RRDv5 Route 组件 API。 Router 组件具有几个必需的 props 才能使其工作。

Router

declare function Router(
  props: RouterProps
): React.ReactElement | null;

interface RouterProps {
  basename?: string;
  children?: React.ReactNode;
  location: Partial<Location> | string;
  navigationType?: NavigationType;
  navigator: Navigator;
  static?: boolean;
}

您的代码中缺少必需的 navigator 和 location props，它们将输入到低级路由器持有的内部位置上下文中。

解决方案

导入高级路由器，将 Route 组件包装在 Routes 组件中，并将 element prop 上的路由内容呈现为 ReactNode （又名 JSX）。 component （ 以及 render 和 children 函数 props` ）属于 v5，在 v6 中不存在。

高级路由器在内部维护自己的历史/位置上下文。

示例：

import './interface/App.css';
import { Home } from './interface/home';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

function App() {
  return ( 
    <div>
      <Router>
        <div>
          <Routes>
            <Route path='/' element={<Home />} />
          </Routes>
        </div>
      </Router>
    </div>
  );
}