javascript - 在 react-router-dom v6 中使用历史

Question

我用 react-router-dom version 6当我使用 this.props.history.push('/UserDashboard')这没用。我把它改成

const history = createBrowserHistory();
history.push('/UserDashboard')

但我仍然有一个问题，当我想重定向到 /UserDashboard 时只是链接更改，页面仍然是第一个？？
有什么帮助吗？？**

        handleSubmit(event){
       
    
        event.preventDefault();
        const history = createBrowserHistory();
        axios({
          method: "POST", 
          url:"http://localhost:3001/users/login", 
          data:  this.state
        }).then((response)=>{
          console.log(response.data.user.admin)
          if (response.data.success === true && response.data.user.admin === false){
           
                  const history = createBrowserHistory();
                  history.push({
                   pathname:"/users",
                   state:{
                   Key : response.data.user }
     });
    
        
           
          }else if(response.statusCode === 401 ){
            alert("Invalid username or password");
           window.location.reload(false);
          }
        })
      }

我的 routes.js 文件:

    import React from 'react';
    import { Navigate } from 'react-router-dom';
    import DashboardLayout from './Pages/DashboardLayout';
    import AccountView from './Pages/views/account/AccountView';
    import CustomerListView from './Pages/views/customer/CustomerListView';
    import DashboardView from './Pages/views/reports/DashboardView';
    import ProductListView from './Pages/views/product/ProductListView';
    import SettingsView from './Pages/views/settings/SettingsView';
    import Home from './Pages/home';
    import About from './Pages/About';
    import Partners from './Pages/Partners';
    import Services from './Pages/services';
    import Login from './Pages/Login';
    import RD from './Pages/RD';
    import ContactUs from './Pages/contactus';
    import Apply from './Pages/apply';
    import PartnerShip from './Pages/partnership';
    import News from './Pages/News';
    const routes = [
     {
     path: 'users',
     element: <DashboardLayout />,
     children: [
      { path: 'account', element: <AccountView /> },
      { path: 'customers', element: <CustomerListView /> },
      { path: 'dashboard', element: <DashboardView /> },
      { path: 'products', element: <ProductListView /> },
      { path: 'settings', element: <SettingsView /> }
      ]
     },
    {
    path: '/',
    element: <Home />,
    },
    {
    path: 'about',
    element: <About />
    },
     {path: 'partners',
     element: <Partners />,
    
    },
    {
    path: 'services',
    element: <Services />,
    
    },
    {
    path: 'contactus',
    element: <ContactUs />,
    
    },
    {
    path: 'login',
    element: <Login />,
    
     },{
    path: 'RD',
    element: <RD />,
    
    },
    {
    path: 'apply',
    element: <Apply />,
    
     },
     {
    path: 'partnership',
    element: <PartnerShip />,
    
     },
     {
    path: 'News',
    element: <News />,
    
     }
    ];

    export default routes;

Answer 1

在 react-router-dom v6 中，需要使用 使用导航 而不是使用历史。
参见 https://reacttraining.com/blog/react-router-v6-pre/ 中的示例

import React from 'react';
import { useNavigate } from 'react-router-dom';

function App() {
  let navigate = useNavigate();
  let [error, setError] = React.useState(null);

  async function handleSubmit(event) {
    event.preventDefault();
    let result = await submitForm(event.target);
    if (result.error) {
      setError(result.error);
    } else {
      navigate('success');
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      // ...
    </form>
  );
}