我正在使用，我有一个随机字符串，但是当我单击链接页面时会工作，但是当do再次单击不起作用时

Question

我有一个简单的菜单，我有一个页面的随机上下文，只用于测试。我的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>
   );
} 

我的问题是，当我第一次点击“产品”菜单时，随机工作，但如果我再次点击没有工作，我必须更改链接，例如登录，并返回到产品的随机作品。

有人知道会有什么问题吗？

我使用的是React dom-16.8历史记录-5 React路由器-dom-6

Answer 1

问题

1. 链接到具有相同路径和状态/etc的路由实际上是一种非操作。它不会触发导航，也不会触发rerender.
2. ctx.users.push(Math.random().toString(36).substr(2, 5));的路由组件，这是一种无意的副作用，也不会触发改进机。只有在导航到"/products".

之后才能看到突变

解决方案

1. users应该处于某种反应状态，所以当它被更新时，它可以触发。将users状态和状态更新器(或一些回调更新状态)传递为UserContext值。
2. 在链接中传递一些“随机”状态值，从而触发导航操作。检查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>
  );
};

​

​

Answer 2

使用BrowserRouter而不是HashRouter