React Router Dom v6 渲染不重定向

Question

          <Route
            exact
            path="/register"
            element={<Register />}
            render={() => !isAuthenticated ? <Register/> : <Navigate replace to="/login" />}
          /> 

好的，所以如果用户未通过身份验证并且“isAuthenticated”通常设置为 false，我想重定向到登录，但它不会重定向我。 没有记录一个错误。 我将<Navigate />替换为console.log("something")以查看从React-Router-Dom导入的组件是否有问题，但“something”没有记录。 我都试过了还是不知道是什么问题。 谢谢

Answer 1

我认为您将element和render道具一起使用。 尝试删除element

Answer 2

1. 逻辑错误？
   

isAuthenticated = false默认情况下。 你要：

• 假>'登录'
• 真> <Register/>

但是你放了!isAuthenticated所以它是相反的：

• 假> <Register/>
• 真>'登录'

2. 将三元改成更容易综合的东西。

为什么不： isAuthenticated? <Navigate replace to="/login" />: <Register/> isAuthenticated? <Navigate replace to="/login" />: <Register/> 。
省得我头疼。

3. 导航属性

明确的属性

<Navigate replace to="/login" />
/*or replace={false} */ <Navigate replace={true} to="/login" />

Answer 3

您可以通过签入 Register 组件来解决这个问题。

 const navigate = useNavigate(); useEffect(()=>{ if(isAuthenticated){ navigate('/'); } },[]);

Answer 4

您应该从路线中丢失“精确”，因为它在 v6 版本中已更改。

https://reactrouter.com/docs/en/v6/upgrading/v5

根据反应路由器

<Route exact>不见了。 相反，具有后代路由（在其他组件中定义）的路由在其路径中使用尾随 * 来指示它们深度匹配

Answer 5

您正在混合react-router-dom v5 和 v6 语法。 RRDv6 Route组件不再采用render function 道具（也不是component道具或children道具 function 道具），现在仅采用采用 JSX 的单个element道具来渲染路由内容。

移除render道具并将条件逻辑移动到element道具中。

<Route
  path="/register"
  element={!isAuthenticated ? <Register /> : <Navigate replace to="/login" />}
/>

如果这是您经常使用的模式，则将其抽象为一个AuthLayout组件，该组件有条件地为您要保护的嵌套路由或Navigate组件呈现一个Outlet以重定向。

const AuthLayout = ({ isAuthenticated }) => 
  !isAuthenticated
    ? <Outlet />
    : <Navigate replace to="/login" />;

...

<Route element={<AuthLayout isAuthenticated={isAuthenticated} />}>
  <Route path="/register" element={<Register />} />
</Route>

注意：我认为您可能混淆了当isAuthenticated为 true 时要呈现的内容，因为通常您希望在未通过身份验证时重定向到身份验证路由。

换句话说，如果经过身份验证，则在插座中渲染路由组件，否则重定向到登录路由。

const AuthLayout = ({ isAuthenticated }) => 
  isAuthenticated
    ? <Outlet />
    : <Navigate replace to="/login" />;