反应手动输入路由的控制流

Question

我有一个App组件，所有的路由定义如下;

function App() {
//some logic for state including canShow which is a boolean and shows routes only if it is true
{canShow && (
<Route exact path="/Route1">
<Comp1 />
</Route>
<Route exact path="/Route2">
<Comp2 />
</Route>
)
}

现在说，如果用户当前在localhost/#/Route1上，并手动输入URL，即说到localhost/#/Route2，控制似乎直接跳转到Comp2

我还在App的子组件中设置了props.history.listen()(在所有路由定义之外)。基本上这个listen是在App的直接子组件中。

是否有任何方式通过手动输入URL，我可以确保控制首先总是去App.js…这样我就可以更新设置& canShow&quot的逻辑;如果canShow为false，则不渲染任何子组件，控件也不会转到Comp1或Comp2

当通过链接导航时，也控制到props.history.listen回调，但是有直接的URL入口，它似乎不会先去props.history.listen。

Answer 1

您可以使用useHistory钩子让您的App组件更新历史更改。这个钩子返回带有location属性的历史对象。

在App组件中，您可以添加一个useEffect来确定您的canShow状态，并在需要时更新它。

import { useHistory } from 'react-router';
import { useEffect, useState } from 'react';
function App() {
const [canShow, setCanShow] = useState(true);
const history = useHistory();

useEffect(() => {
if (history.location.pathname === '/Route1') {
setCanShow(true);
}
}, [history])

//some logic for state including canShow which is a boolean and shows routes only if it is true
return canShow && (
<Route exact path="/Route1">
<Comp1 />
</Route>
<Route exact path="/Route2">
<Comp2 />
</Route>
);
}