我正在使用 React Route，我有一个随机字符串，但是当我点击 link 页面时有效，但再次点击时无效

Question

我有一个简单的菜单，我有一个带有运行dom 上下文的页面，仅用于测试。这是我的 index.js

const Route       = ReactRouterDOM.Route;
const Link        = ReactRouterDOM.Link;
const HashRouter  = ReactRouterDOM.HashRouter;
const Routes      = ReactRouterDOM.Routes;

// create context
const UserContext = React.createContext(null);

function Spa() {

    return (
    <HashRouter>
    <div>
    <h1>Routing - Hello World</h1>
    <Link to="/">Home</Link> --
    <Link to="/about/">About</Link> --
    <Link to="/products">Products</Link>
    <hr />
    <UserContext.Provider value={{ users: ["peter"] }}>
    <Routes>
    <Route path="/" exact element={ <Home />} />
    <Route path="/about/" element={ <About />} />
    <Route path="/products/" element={ <Products />} />
    </Routes>
    </UserContext.Provider>
    </div>
    </HashRouter>
    );
    }

    ReactDOM.render(
    <Spa/>,
    document.getElementById('root')
    );

这是我的 products.js

    const ctx = React.useContext(UserContext);  
    ctx.users.push(Math.random().toString(36).substr(2, 5));

    return (
    <div>
    <h3>Products Component</h3>
    <p>List of the the product we make</p>
    {JSON.stringify(ctx.users)}
    </div>
   );
}

我的问题是，当我第一次单击产品菜单时，运行dom 有效，但如果我再次单击无效，我必须更改 link，例如登录并 return 再次访问运行dom 的产品。

有人知道可能是什么问题吗？

我正在使用反应-dom-16.8 历史5 反应路由器-dom-6

Answer 1

使用BrowserRouter代替HashRouter

Answer 2

问题

链接到具有相同路径和 state/etc 的路由实际上是一个非操作。它不会触发导航，也不会触发路由组件重新呈现。
ctx.users.push(Math.random().toString(36).substr(2, 5)); 是一种无意的副作用，也不会触发重新渲染。您只能在离开并返回 "/products" 后看到突变。

解决方案

users 应该驻留在 some 反应状态中，因此当它更新时它可以触发 React 组件重新渲染。将 users 状态和传递给状态更新器（ 或一些回调来更新状态 ）作为 UserContext 值。
在link中传递一些“随机”状态值，这样它就会触发导航操作。检查 useEffect 中的状态以帮助触发更新 users 状态的效果。

建议

水疗中心

const Spa = () => {
  const [users, setUsers] = useState(["peter"]);
  return (
    <Router>
      <div>
        <h1>Routing - Hello World</h1>
        <Link to="/">Home</Link> --
        <Link to="/about/">About</Link> --
        <Link
          to="/products"
          state={{ value: Math.random() }} // <-- random state to trigger navigation
        >
          Products
        </Link>
        <hr />
        <UserContext.Provider value={{ users, setUsers }}>
          <Routes>
            <Route path="/" exact element={<Home />} />
            <Route path="/about/" element={<About />} />
            <Route path="/products/" element={<Products />} />
          </Routes>
        </UserContext.Provider>
      </div>
    </Router>
  );
};

产品

const Products = () => {
  const { state } = useLocation();
  const { users, setUsers } = useContext(UserContext);

  // "Listen" for updates to route state to trigger effect
  useEffect(() => {
    setUsers((users) => [...users, Math.random().toString(36).substr(2, 5)]);
  }, [state, setUsers]);

  return (
    <div>
      <h3>Products Component</h3>
      <p>List of the the product we make</p>
      {JSON.stringify(users)}
    </div>
  );
};

我正在使用 React Route，我有一个随机字符串，但是当我点击 link 页面时有效，但再次点击时无效

I'm working with React Route, and I have a random string, but when I do click on the link page works but when a do click again doesn't work

javascript

dom

reactjs

react-router

react-dom

问题

解决方案

建议