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

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() （在所有 Route 定义之外）。所以基本上这个监听是在 App 的一个直接子组件中。

有什么方法可以在手动输入 URL 时确保控件首先总是转到 App.js...这样我就可以更新设置“canShow”的逻辑，如果 canShow 为 false，我不渲染任何子组件，并且控件不去 Comp1 或 Comp2

通过链接导航时也可以控制 props.history.listen 回调，但使用直接 URL 输入时，它似乎不会先到 props.history.listen。

Answer 1

您可以使用useHistory 挂钩让您的App 组件根据历史更改进行更新。这个钩子返回带有位置属性的历史对象。

在 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>
  );
}