Question

我有一个使用react-router-dom的React应用，如果满足条件，我想在我的顶级App组件中创建一个<Redirect />。

import { BrowserRouter, Redirect, Route } from 'react-router-dom';

function App() {

  const [user, setUser] = useState(null);

  function noUserRedirect() {
    // redirect to Home if user is empty
    if(!user) {
      return (
        <Redirect to="/" />
      );
    }
  }

  return (
    <BrowserRouter>
      {noUserRedirect()}
      <Route exact path="/">
        <Home />
      </Route>
      <Route path="/dashboard/:id">
        <Dashboard />
      </Route>
    </BrowserRouter>
  );
}

export default App;

我知道没有设置user。当我访问/dashboard时，重定向有效，并且被带到<Home />组件，但是，例如，当我访问/dashboard/123时，重定向功能运行了，但仍然带到了<Dashboard />组件。

如何防止这种情况发生？

Answer 1

为什么不以编程方式重定向，就像这样：



import { BrowserRouter, Redirect, Route } from 'react-router-dom';

function App() {

  const [user, setUser] = useState(null);

  const history = useHistory();

  useEffect(()=>{
    if(!user)
      history.push("/");
  }, [user]);


  return (
    <BrowserRouter>
      <Route exact path="/">
        <Home />
      </Route>
      <Route path="/dashboard/:id">
        <Dashboard />
      </Route>
    </BrowserRouter>
  );
}

export default App;

Answer 2

它一直在工作。我不认为它有效的原因是因为我在<Dashboard />组件中遇到了错误。

当我引用user不存在时，但我感到困惑，因为我认为<Redirect />会在到达{{1}之前发生}。并非如此。

我通过将其放置在仪表板功能的顶部来解决了<Dashboard />中的错误：

<Dashboard />

仪表板组件一旦返回// prevent rendering if user does not exist if(!props.user) { return false; }，重定向成功。

我猜想组件是在路由器进行重定向之前渲染的。这不是超级直观，但现在我知道了，这一切都说得通。

使用React Router，当URL中有参数时如何重定向到路由？

2 个答案: