我有一個簡單的選單，我有一個隨機背景關系的頁面，僅用于測驗。這是我的 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 History-5 React-Router-dom-6
uj5u.com熱心網友回復：
問題
- 鏈接到具有相同路徑和狀態/等的路由實際上是一個非操作。它不會觸發導航，也不會觸發路由組件重新渲染。
ctx.users.push(Math.random().toString(36).substr(2, 5));是一種無意的副作用，也不會觸發重新渲染。您只有在導航離開并回傳后才能看到突變"/products"。
解決方案
users應該處于某種反應狀態，所以當它更新時，它可以觸發反應組件重新渲染。傳遞users狀態和狀態更新器（或一些回呼來更新狀態）作為UserContext值。- 在鏈接中傳遞一些“隨機”狀態值，以便觸發導航操作。檢查狀態
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>
);
};
uj5u.com熱心網友回復：
使用BrowserRouter代替HashRouter
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/381402.html
標籤：javascript 反应 dom 反应路由器 反应域