尝试导入错误:'react-router-dom'

给出这个错误的useHistory:

Failed to compile ./src/pages/UserForm/_UserForm.js导入失败 错误:useHistory没有从react-router-dom中导出。这

.

.

react-router-dom版本:

4.3.1

代码:

import React, { useState, Fragment } from 'react';
import FormUserDetails from './FormUserDetails';
import FormPersonalDetails from './FormPersonalDetails';
import Confirm from './Confirm';
import Success from './Success';
import Button from '@material-ui/core/Button';
import { Grid, makeStyles } from '@material-ui/core';
import { useHistory } from 'react-router-dom';




function UserForm() {
const [step, setStep] = useState(1);
const history = useHistory();




const StepButtons = (props) => (
<React.Fragment>
<Grid item xs={4}>
{props.value !== 'initial' ?
<Button variant="outlined" className={classes.button} onClick={(e) => previousStep(e)}>Back</Button> :
<Button variant="outlined" className={classes.button} onClick={(e) => reGenerate(e)}>Re-generate</Button>
}
</Grid>
<Grid item xs={4} />
<Grid item xs={4}>
{
props.value === 'confirm' ?
<Button variant="outlined" className={classes.button} style={{ float: "right" }} onClick={(e) => confirm(e)}>Confirm</Button> :
props.value !== 'final' ?
<Button variant="outlined" className={classes.button} style={{ float: "right" }} onClick={(e) => nextStep(e)}>Continue</Button> :
null
}
</Grid>
</React.Fragment>


);
const nextStep = (e) => {
e.preventDefault();
setStep(prevState => prevState + 1)
}
const previousStep = (e) => {
e.preventDefault();
setStep(prevState => prevState - 1)
}
const reGenerate = (e) => {
e.preventDefault();
}
const confirm = (e) => {
history.push('/')
}
return (
<div>
<h1>Hello</h1>
</div>
)
}
export default UserForm
283626 次浏览
小开

我升级了react-router-dom的版本

5.2.0

现在它正在起作用。

小开
最佳答案

在react-router-dom v6中，useHistory()被useNavigate()取代。

你可以使用:

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

如果你必须坚持使用最新的react-router-dom v6.0.0，那么用useNavigate替换useHistory。否则，将react-router-dom降级到v5.2.0，代码就可以正常工作了。

小开

用 usenavate替换useHistory < / p > 

const navigate = useNavigate();

然后将history.push('/path')替换为navigate('/path')

用navigate('/path', { replace: true })改变history.replace('/path')

想要在推/导航中使用state做navigate('/path', { state: { name:'Xyz' }})

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


const navigate = useNavigate();


const confirm = (e) => {
navigate.push('/')
}
小开

没有一个答案实际上提到如何复制以前在v5 useHistory钩子中可用，但在v6中不再可用的方法，例如goBack， goForward， go。下面的例子取自迁移向导:

React Router v5应用使用useHistory钩子中的方法:

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


function App() {
const { go, goBack, goForward } = useHistory();


return (
<>
<button onClick={() => go(-2)}>
Go 2 pages back
</button>
<button onClick={goBack}>Go back</button>
<button onClick={goForward}>Go forward</button>
<button onClick={() => go(2)}>
Go 2 pages forward
</button>
</>
);
}

下面是使用useNavigate钩子中的navigate方法的v6等效应用程序:

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


function App() {
const navigate = useNavigate();


return (
<>
<button onClick={() => navigate(-2)}>
Go 2 pages back
</button>
<button onClick={() => navigate(-1)}>Go back</button>
<button onClick={() => navigate(1)}>
Go forward
</button>
<button onClick={() => navigate(2)}>
Go 2 pages forward
</button>
</>
);
}
小开

react-router-dom v5 useHistory，但是在v6中你应该使用useNavigate钩子

用法:

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


function SignupForm() {
let navigate = useNavigate();


async function handleSubmit(event) {
event.preventDefault();
await submitForm(event.target);
navigate("../success", { replace: true });
}


return <form onSubmit={handleSubmit}>{/* ... */}</form>;
小开

v6中的useHistory将被useNavigate取代。

只需将useHistory名称替换为usenavate，或遵循以下3个简单步骤。

  1. import { useNavigate } from 'react-router-dom' ;在你的文件顶部。

  2. const navigate = useNavigate();在你的函数中定义。

  3. navigate("/path_name");重定向到您的路径。

小开

在react-router-dom v6中，useHistory()函数被useNavigate()取代。

const navigate = useNavigate();

导航(“/ login")

小开

只需要用usenavate替换useHistory即可:

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

然后

const navigate = useNavigate();

最后的

navigate("/home");

提交答案