[英]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
I have a simple menu and I have a page with a random context only for tests.我有一个简单的菜单,并且我有一个带有随机上下文的页面,仅用于测试。 Here my index.js
这是我的 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')
);
and this is my products.js这是我的 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>
);
}
my problem is that when I do click on the products menu the fist time the random works, but if I do again doesn't works, I have to change of link, for example login and return again to products for random works.我的问题是,当我第一次点击产品菜单时,随机作品,但如果我再次点击不起作用,我必须更改链接,例如登录并再次返回产品以进行随机作品。
Someone knows what could be the problem?有人知道可能是什么问题吗?
I am using React-dom-16.8 History-5 React-Router-dom-6我正在使用 React-dom-16.8 History-5 React-Router-dom-6
Use BrowserRouter
instead of HashRouter
使用
BrowserRouter
而不是HashRouter
ctx.users.push(Math.random().toString(36).substr(2, 5));
is an unintentional side-effect and also won't trigger a rerender."/products"
."/products"
后看到突变。users
should reside in some react state so when it's updated it can trigger React components to rerender. users
应该驻留在一些react state 中,因此当它更新时,它可以触发 React 组件重新渲染。 Pass the users
state and the state updater ( or some callback to update state ) as the UserContext
value.users
state和state 更新程序(或一些回调以更新 state )作为UserContext
值传递。useEffect
to help trigger the effect to update the users
state.useEffect
以帮助触发更新users
state 的效果。Spa温泉
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>
);
};
Products产品
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>
);
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.