单击 link 更改路由但不更改组件本身 - React Hook Router

Question

我遇到了 ReactJS 路由问题。 Working Demo。我正在使用 hookrouter 包。

问题：

如演示中所述，如果我在 /users 路线上并且当我单击 about link 时，URL 会发生变化，但 About 组件未加载。

我想要什么？

有没有一种方法可以在我单击 link 时加载组件？

import { A, useRoutes } from "hookrouter";

const Users = () => {
  return (
    <div>
      <h1>Users</h1>
      <A href="/about">About</A>
    </div>
  );
};

const About = () => {
  return (
    <div>
      <h1>About</h1>
      <A href="/users">Users</A>
    </div>
  );
};

const routes = {
  "/users": () => <Users />,
  "/about": () => <About />
};

function App() {
  const routeResult = useRoutes(routes);
  return (
    <div className="App">
      <div>
        <A href="/users">Users Page</A>
      </div>
      <div>
        <A href="/about">About Page</A>
      </div>
      {routeResult}
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<React.StrictMode><App /></React.StrictMode>, rootElement);

Answer 1

hookrouter 库中有一个 open issue，如果您用 <React.StrictMode> 包装您的应用程序，导航将不起作用。

所以，现在，移除严格模式，你会没事的。

index.js

import React from "react";
import ReactDOM from "react-dom";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  // <React.StrictMode> // <------ comment this for now.
  <App />,
  // </React.StrictMode>,
  rootElement
);

working copy of your codesandbox

单击 link 更改路由但不更改组件本身 - React Hook Router

Clicking on link changes route but not Component itself - React Hook Router

javascript

reactjs

hookrouter