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

Posted 2023-02-22

【中文标题】在 react-router-dom v6 中使用历史

【英文标题】：using history with react-router-dom v6

【发布时间】：2020-12-07 20:00:56

【问题描述】：

我使用 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;

【问题讨论】：

您是否尝试在功能组件或类的开头更改 const history = createBrowserHistory()？

是的，但它不起作用

你在使用历史钩子吗？因为你需要在 import useHistory from 'react-router-dom' 中声明它；并像这样使用它： const history = useHistory()

您可以编辑您的代码并放置您的路由文件吗？

不，问题是我使用 react-router-dom@6 版本 6，所以当我使用 useHistory() 时出现此错误 Attempted import error: 'useHistory' is not export from 'react -router-dom'。

【参考方案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>
  );

【讨论】：

问题是，我们如何从外部组件导航？例如。当我们的逻辑在actions内时？

@Eduard 看看我的回答。这应该可以解决您的问题。

文档：Use useNavigate instead of useHistory

【参考方案2】：

基于 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
    />
  );
;

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

const history = createBrowserHistory();
<CustomRouter history=history>
 ...
</CustomRouter>

【讨论】：

嘿@poyoman，您将如何使用基于类的组件来实现相同的目标。我不使用功能组件。

@Fonty 把我的功能组件放在你的类组件的“render”方法里面:)

谢谢@poyoman，我会试一试。最好使用最新版本。

【参考方案3】：

我们都知道 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>
    )