Question

**我使用的是react-router-dom版本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);
      }
    })
  }

我的route.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中，您需要使用 useNavigate 而不是useHistory。

请参阅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>
  );
}

在react-router-dom v6中使用历史记录

1 个答案: