javascript - 使用 Navigate/Routes 调试路线

Question

在上一个问题中我说过I was following this tutorial ，这应该是一件容易的事。

但是该教程可能相当旧，它使用了 Switch 和 Redirect。我尝试将它与新的 Routes 和 Navigate 一起使用...但只需重命名它们就会显示空白屏幕。

所以我搜索了调试路线，但我无法找到有效的答案。当然，我可能会遗漏一些东西，甚至可能是微不足道的。

自从我学习 React 以来，我几乎逐字复制，很少进行修饰:

import React from "react"
import TextEditor from "./TextEditor"
import { 
  BrowserRouter,
  Routes,
  Route,
  Navigate
} from "react-router-dom"
import { v4 as uuidV4 } from "uuid"

class DebugRouter extends BrowserRouter {
  constructor(props){
      super(props);
      console.log('initial history is: ', JSON.stringify(this.history, null,2))
      this.history.listen((location, action)=>{
          console.log(
              `The current URL is ${location.pathname}${location.search}${location.hash}`
          )
          console.log(`The last navigation action was ${action}`, JSON.stringify(this.history, null,2));
      });
  }
}

function App() {
  return (
    <DebugRouter>
      <Routes>
        <Route path="/" exact>
          <Navigate to={`/documents/${uuidV4()}`} />
        </Route>
        <Route path="/documents/:id">
          <TextEditor />
        </Route>
      </Routes>
    </DebugRouter>
  );
}

export default App;

现在我得到了三个错误，但它们都是一样的，我不知道为什么它在同一行中抛出了三次......

类型错误:无法在 _classCallCheck 中将类作为函数调用

该行是:

export default function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
}

当使用我在另一个关于如何调试的问题中发现的DebugRouter时，我什至不具备 react 能力，无法理解为什么它会变得狂暴。日志说，罪魁祸首就在这里:

DebugRouter
src/App.js:12
   9 | import { v4 as uuidV4 } from "uuid"
  10 | 
  11 | class DebugRouter extends BrowserRouter {
> 12 |   constructor(props){
  13 |       super(props);
  14 |       console.log('initial history is: ', JSON.stringify(this.history, null,2))
  15 |       this.history.listen((location, action)=>{

如果您需要知道当我使用 BrowserRouter 时到底发生了什么，the blank page HTML is here 。没什么特别的，看起来路线根本不起作用。

我在将教程升级到最新的 React 时是否遗漏了一些内容？

Answer 1

BrowserRouter不是React，甚至不是Javascript、Class组件，所以它无法扩展，它是一个React函数组件。从我这里看到的看来你只是想“监视”location路线改变时对象。

创建 layout route使用 useLocation 的组件和 useNavigationType 钩子(Hook)和一个useEffect Hook “监听”位置更改并注销详细信息。

示例:

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

const DebugLayout = () => {
  const location = useLocation();
  const navigationType = useNavigationType(); // "POP" | "PUSH" | "REPLACE"

  React.useEffect(() => {
    console.log("The current URL is", {...location});
    console.log("The last navigation action was", navigationType);
  }, [location, navigationType]);

  return <Outlet />;
};

export default DebugLayout;

导入并渲染 DebugLayout作为布局路线。另外仅供引用，路由组件应传递给每个 Route组件的element支柱。仅其他Route在嵌套路由的情况下，组件是有效的子组件。

...
import DebugLayout from '../path/to/DebugLayout';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route element={<DebugLayout />}>
          <Route path="/" element={<Navigate to={`/documents/${uuidV4()}`} />} />
          <Route path="/documents/:id" element={<TextEditor />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}