假设我有一条路径如下:
const runWhenRouteIs123 = () => {}
<Routes>
<Route path="123" element={<div>hello</div>} />
... // other routes
<Routes>
我想让功能runWhenRouteIs123()在路由为"WhateverIsBeprere/123"的时候运行.该函数使用Reaction Redux来分派一些逻辑.
在此之前，使用render()进行渲染是可能的，render()允许预先运行逻辑.短路判断不会对我起作用，因为会抛出一条警告:"当呈现另一个组件时，无法更新组件".
我之前try 过，但收到了上面的警告:
<Routes>
<Route path="123" element={dispatch(xyz()) && <div>hello</div>} />
... // other routes
<Routes>
如果需要更多的澄清，请让我知道！
您可以使用useMatch来计算是否存在当前匹配的路由，并将runWhenRouteIs123函数作为副作用运行.如果存在匹配项，则useMatch返回Match对象，否则返回NULL.
import {
Routes,
Route,
useMatch,
} from 'react-router-dom';
...
const isRoute123 = useMatch("/123");
useEffect(() => {
const runWhenRouteIs123 = () => {};
if (isRoute123) {
runWhenRouteIs123();
}
}, [isRoute123]);
<Routes>
<Route path="123" element={<div>hello</div>} />
... // other routes
<Routes>
或者，您可以将runWhenRouteIs123向下移动到已布线的组件，并在挂载时从useEffect挂钩调用.
示例:
const Component123 = () => {
useEffect(() => {
runWhenRouteIs123();
}, []);
return <div>hello</div>;
}
<Routes>
<Route path="123" element={<Component123 />} />
... // other routes
<Routes>