React JS React-router-dom 导航不起作用

Question

我尝试在登录我的 React 应用程序后重定向用户，但导航不起作用，我不知道为什么......

这是我的代码，感谢您的帮助

import React, { Component } from "react";
import {Route, Navigate} from 'react-router-dom';
import Bouton from "../components/Bouton";

class Dallan extends Component{
    logout = () =>{
        localStorage.removeItem('logged');
        return <Navigate to= '/login' />;
    }
    render(){
        return(
            <Bouton typeBtn = 'btn-danger' click={() => this.logout()}>Deconnexion</Bouton>
        )
    }
}

export default Dallan;

在我的 App.js 中

function App() {
  let session = localStorage.getItem('logged');
  return (
    <BrowserRouter>
    <Routes>
    <Route path="/" element={session ? <Navigate to="/dallan" /> : <Login/>} />
       <Route path='/dallan' element={<Dallan/>}/>
    </Routes>
    </BrowserRouter>
 
  );
}

export default App;

Answer 1

如果您使用的是 React Route dom v6，我假设您使用的是

<Navigate />

，那么

<Navigate />

是一个需要渲染才能工作的组件。您只是将其恢复为空，因此它显然不会呈现。您想改用

useNavigate()

钩子。但是您将需要使用函数组件来使用钩子。像这样：

import React, { Component } from "react";
import {Route, useNavigate} from 'react-router-dom';
import Bouton from "../components/Bouton";

function Dallan() {
    const navigate = useNavigate();
    const  logout = () =>{
        localStorage.removeItem('logged');
        navigate('/login')
    }

    return(
        <Bouton typeBtn = 'btn-danger' click={() => logout()}>Deconnexion</Bouton>
    )
}

export default Dallan;

Answer 2

在useEffect中使用navigate方法，如下所示：

进口

import { useNavigate } from "react-router-dom";
import { useEffect, useState } from "react";  

使用以下代码

const navigate = useNavigate();
const [logged, setLogged] = useState(null);

const logout = () => {
   localStorage.clear();
   console.log("Logged out");
   setLogged(Math.random());
};

useEffect(() => {
  navigate("/login");
}, [logged]);

Answer 3

我需要在渲染页面之前添加重定向，但它们都不起作用。我刚刚为 Auth-token 添加了一个 if 条件，并在 render() 之后返回了一个“”。

Answer 4

从技术上讲，它应该可以尝试这样写，

return <Navigate replace={true} to='/' />

确保您放置了replace={true}，因为它的工作是重定向，这意味着它将替换页面上的所有内容，您重定向到用户的位置