更新到React-Router-DOM v6后组件未渲染但URL发生变化

Question

我已经更新到

react-router-dom

版本 6，我看到 URL 已更新，但组件未呈现。另外，当我刷新页面时，组件仍然没有渲染。

我有这个代码：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import { createBrowserHistory } from 'history'

const history = createBrowserHistory()

function App() {
  return (
    <Router history={history}>
      <Routes>
        <Route path='/logout' element={<Logout/>} />
        <Route path='/' element={<Authenticate/>}>
          <Route index element={<Analysis />} />
          <Route path='/analysis' element={<Analysis />} />
          <Route path='/login' element={<Login/>} />
          <Route path='/register' element={<Register/>} />
          .....
        </Route>
      </Routes>
    </Router>
  )
}

const rootNode = document.getElementById('root')
ReactDOM.render(<App />, rootNode)

它渲染的唯一组件是

<Authenticate/>

组件。当我改变路线时，在这个组件中我实现了这段代码

handleClick = e => {
  console.log('e is :', e.key)
  if (e.key !== '/logout') {
    history.push(e.key)
  }
}

我的实施有问题还是其他什么问题？

我正在使用：

"react-router-dom": "^6.22.1",
"react": "^17.0.2",
"history": "^5.3.0",

Answer 1

问题

BrowserRouter

组件不消耗任何

history

道具

declare function BrowserRouter(
  props: BrowserRouterProps
): React.ReactElement;

interface BrowserRouterProps {
  basename?: string;
  children?: React.ReactNode;
  future?: FutureConfig;
  window?: Window;
}

因此，这里可能的问题是您的自定义

history

引用正在影响 BrowserRouter 组件范围之外的导航操作。换句话说，路由器完全不知道它们，并且不会对外部 URL 更改做出反应。因为

Authenticate

是一个布局路由组件，所以它

必须 为嵌套路由渲染一个 Outlet 组件，以便在 URL 路径匹配时渲染出其

element

内容。确保情况确实如此。解决方案

使用

BrowserRouter

（首选）使用

useNavigate

 挂钩和 

navigate 函数来实现导航操作。更新

Authenticate

和任何其他路由组件以使用

useNavigate

钩子。示例：

import { Outlet, useNavigate } from 'react-router-dom';

const Authenticate = () => {
  const navigate = useNavigate();

  handleClick = e => {
    if (e.key !== '/logout') {
      navigate(e.key); // <-- issue PUSH action
    }
  };

  ...

  return (
    ...
    <Outlet /> // <-- nested routes render content here
    ...
  );
};

使用 

HistoryRouter

和自定义

history

对象导入并使用

未记录的

HistoryRouter

。单独创建并导出您的 

history 对象，以便所有组件都引用 相同的 历史引用。 示例：

历史.js

import { createBrowserHistory } from 'history';
const history = createBrowserHistory();
export default history;

import {
  unstable_HistoryRouter as Router,
  Routes,
  Route
} from 'react-router-dom';
import history from './path/to/history';

function App() {
  return (
    <Router history={history}>
      <Routes>
        <Route path='/logout' element={<Logout/>} />
        <Route path='/' element={<Authenticate/>}>
          <Route index element={<Analysis />} />
          <Route path='/analysis' element={<Analysis />} />
          <Route path='/login' element={<Login/>} />
          <Route path='/register' element={<Register/>} />
          .....
        </Route>
      </Routes>
    </Router>
  )
}

验证.jsx

import { Outlet } from 'react-router-dom';
import history from './path/to/history';

const Authenticate = () => {
  ...

  handleClick = e => {
    if (e.key !== '/logout') {
      history.push(e.key); // <-- issue PUSH action
    }
  };

  ...

  return (
    ...
    <Outlet /> // <-- nested routes render content here
    ...
  );
};

仅当您

确实

需要外部自定义history对象时才使用此版本，例如您正在将路由器连接到 Redux 商店或类似商店，否则，首选第一个选项。