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

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);
      }
    })
  }

我的 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源代码，你可以做类似的事情

// === Javascript version  === //

import { Router } from 'react-router-dom';

const CustomRouter = ({
  basename,
  children,
  history,
}) => {
  const [state, setState] = React.useState({
    action: history.action,
    location: history.location,
  });

  React.useLayoutEffect(() => history.listen(setState), [history]);

  return (
    <Router
      basename={basename}
      children={children}
      location={state.location}
      navigationType={state.action}
      navigator={history}
    />
  );
};

// === typescript version === //
    
import * as React from "react";
import { BrowserHistory } from "history";
import { Router, Navigator } from "react-router-dom";

type Props = {
  basename?: string;
  children: React.ReactNode;
  history: BrowserHistory;
}

const CustomRouter = ({ basename, children, history }: Props) => {
  const [state, setState] = React.useState({
    action: history.action,
    location: history.location,
  });
  
  React.useLayoutEffect(() => history.listen(setState),[history])

  return (
    <Router
      basename={basename}
      location={state.location}
      navigator={history}
      navigationType={state.action}
    >
      {children}
    </Router>
  );
};

然后让你的历史来自外部：

import { createBrowserHistory } from 'history';

const history = createBrowserHistory();

<CustomRouter history={history}>
  ...
</CustomRouter>

Answer 2

我们都知道react-router-dom v6中不再有{useHistory}之类的东西。有更好的方法来完成 useHistory 的工作。

首先导入 useNavigate ...

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

然后导入后执行此操作

function Test() {
    const history = useNavigate();

    function handleSubmit(e) {
        e.preventDefault();

        history('/home');
    }

    return (
        <form onSubmit={handleSubmit}>
            <button>Subimt</button>
        </form>
    )
}

Answer 3

Reactjs v6 附带了 useNavigate 而不是 useHistory。

=> 首先，你必须像这样导入它： import {useNavigate} from 'react-router-dom'。

=> 那么你只能在 React 功能组件下使用它，如下所示：

常量导航 = useNavigate() ;

=>然后你想导航哪条路线，只需输入路线名称，如下所示：

导航（“/关于”）；

示例：如果您想在单击按钮后导航到“关于”页面。那么您应该输入

在此 onClick 事件下导航（“/about”） ：

<button onClick = {()=>navigate("/about")}>转到关于页面

谢谢。

Answer 4

用户使用Navigate react-router-domv6

import {useNavigate} from 'react-router-dom';
const navigate = useNavigate();
navigate('/home')

Answer 5

在 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>
  );
}

Answer 6

Typescript CustomBrowserRouter 基于@Poyoman 的回答：

创建 CustomBrowserRouter 组件：

import React from "react";
import { BrowserHistory, Action, Location } from "history";
import { Router } from "react-router-dom"

interface CustomRouterProps {
    basename?: string,
    children?: React.ReactNode,
    history: BrowserHistory
}

interface CustomRouterState {
    action: Action,
    location: Location
}

export default class CustomBrowserRouter extends React.Component<CustomRouterProps, CustomRouterState> {
    constructor(props: CustomRouterProps) {
        super(props);
        this.state = { 
            action: props.history.action,
            location: props.history.location
        };

        React.useLayoutEffect(() => props.history.listen(this.setState), [props.history]);
    }

    render() {
        return (
            <Router
                basename={this.props.basename}
                children={this.props.children}
                location={this.state.location}
                navigationType={this.state.action}
                navigator={this.props.history}
            />
        );
    }
}

使用自定义浏览器路由器：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { createBrowserHistory } from "history";
import CustomBrowserRouter from './CustomRouter/CustomBrowserRouter';

let history = createBrowserHistory();

ReactDOM.render(
  <React.StrictMode>
    <CustomBrowserRouter history={history}>
      <App />
    </CustomBrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

Answer 7

解决方案是

在 v6 中，应重写此应用程序以使用导航 API。大多数时候，这意味着将 useHistory 更改为 useNavigate 并更改history.push 或history.replace 调用站点。

    // This is a React Router v5 app
import { useHistory } from "react-router-dom";
        
        function App() {
          let history = useHistory();
          function handleClick() {
            history.push("/home");
          }
          return (
            <div>
              <button onClick={handleClick}>go home</button>
            </div>
          );
        }

查看文章.... https://reactrouter.com/en/v6.3.0/upgrading/v5#use-usenavigate-instead-of-usehistory

// This is a React Router v6 app
import { useNavigate } from "react-router-dom";

function App() {
  let navigate = useNavigate();
  function handleClick() {
    navigate("/home");
  }
  return (
    <div>
      <button onClick={handleClick}>go home</button>
    </div>
  );
}

导航push和导航return不是必需的。