单击链接更改路由，但不更改组件本身-- React路由器

Question

我面临着ReactJS路由问题。工作演示。我正在使用hookrouter包。

发行：

正如演示中提到的，如果我在/users路由上，当我单击about链接时，URL会发生变化，但是About组件不会被加载。

我想要什么？

当我单击组件的链接时，是否有一种加载组件的方法？

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

在钩子路由器库中有一个公开发行，如果您用<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
);

代码框的工作副本