如何在react中重定向表单App.js文件

Question

成功登录后，我想重定向到 /dashboard。我无法使用 useNavigate()，因为它位于 App.js 文件中，并且不在组件内部。下面是我的代码。我尝试使用重定向和导航，但它不起作用。

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import Login from './Login';
import Signup from './Signup';
import { useState } from 'react';
import { useNavigate, redirect, Navigate } from 'react-router-dom';
import axios from 'axios';

function App() {
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  // const navigate = useNavigate();

  const hanldeEmailChange = (e) => {
    setEmail(e.target.value);
  }

  const handlePasswordChange = (e) => {
    setPassword(e.target.value);
  }

  const handleLogin = async (e) => {
    e.preventDefault();

    try {
      const resp = await axios.post('http://localhost:8000/api/login', {
        email,
        password
      });
      if (resp.status === 200) {
        console.log(resp)
        const { token, refreshToken } = resp.data;
        localStorage.setItem('token', token);
        localStorage.setItem('refreshToken', refreshToken);
        setIsAuthenticated(true);
        // return navigate('/dashboard');
        redirect('/dashboard')
        // <Navigate to='/dashboard' replace />
      }
    } catch (error) {
      console.error(error);
    }
  }

  const router = createBrowserRouter([
    {
      path: '/',
      element: <Signup />
    },
    {
      path: '/login',
      element: <Login handlePasswordChange={handlePasswordChange} hanldeEmailChange={hanldeEmailChange} hanldeSubmit={handleLogin} />
    },
    {
      path: '/dashboard',
      element: '<div>Dashboard</div>'
    }
  ])
  return (
    <RouterProvider router={router} />
  );
}

export default App;

我尝试从“react-router-dom”重定向和导航，但它不起作用。

Answer 1

我建议尝试这种方式

    import { useState } from 'react'
import {Navigate} from 'react-router-dom'
import './App.css'

function App() {
  const [login, setLogin] = useState(false)
    
    const handleClick = () => {
        setLogin(true)
    }


  return (
    <>

        { login && (
                  <Navigate to="/test" replace={true} />

        )} 
            Welcome
            <div>Welcome</div>
            <button onClick={handleClick}>
                Click
            </button>

    </>
  )
}

export default App

这是文档中反应路线的方式 reactRouteNavigation