如何在 React Router Dom v6 中推送历史记录

Question

我尝试了很多次，但无法升级我的代码来制作push.history正常工作。

\n

这是我使用react-router-dom v5的旧代码：

\n

withRouter这段代码在以前的版本中完美运行，但当我升级到 v6 时，我不知道和会被什么取代push.history这段代码在以前的版本中完美运行，但当我升级到 v6 时，我不知道新版本中将

\n

import React from 'react'\nimport { withRouter } from 'react-router-dom'\nimport { connect } from 'react-redux'\nimport PropTypes from 'prop-types'\nimport TextFieldGroup from '../common/TextFieldGroup'\nimport TextAreaFieldGroup from '../common/TextAreaFieldGroup'\nimport SelectListGroup from '../common/SelectListGroup'\nimport InputGroup from '../common/InputGroup'\nimport { createProfile } from '../../actions/profileActions'\n\nclass CreateProfile extends React.Component{\n    constructor( props ) {\n        super(props)\n\n        this.state = {\n            displaySocialInputs: false,\n            handle: '',\n            company: '',\n            website: '',\n            location: '',\n            status: '',\n            skills: '',\n            githubusername: '',\n            bio: '',\n            twitter: '',\n            facebook: '',\n            linkedin: '',\n            youtube: '',\n            instagram: '',\n            errors:{}\n        }\n\n\n        this.onChange = this.onChange.bind(this)\n        this.onSubmit = this.onSubmit.bind(this)\n\n    }\n\n    UNSAFE_componentWillReceiveProps( nextProps ) {\n        if ( nextProps.errors ) {\n            this.setState(()=>({ errors: nextProps.errors }))\n        }\n    }\n    onSubmit( e ){\n        e.preventDefault()\n        \n        const profileData = {\n            handle: this.state.handle,\n            company: this.state.company,\n            website: this.state.website,\n            location: this.state.location,\n            status: this.state.status,\n            skills: this.state.skills,\n            githubusername: this.state.githubusername,\n            bio: this.state.bio,\n            twitter: this.state.twitter,\n            facebook: this.state.facebook,\n            linkedin: this.state.linkedin,\n            youtube: this.state.youtube,\n            instagram: this.state.instagram,\n        }\n\n        this.props.createProfile( profileData , this.props.history )\n    }\n\n    onChange( e ) {\n        e.persist()\n        this.setState(()=>({ [ e.target.name ]: e.target.value }))\n    }\n\n    render(){\n\n        const options = [\n            { label: '\xd9\x88\xd8\xb6\xd8\xb9\xdb\x8c\xd8\xaa \xd8\xad\xd8\xb1\xd9\x81\xd9\x87 \xd8\xa7\xdb\x8c \xd8\xae\xd9\x88\xd8\xaf \xd8\xb1\xd8\xa7 \xd8\xa7\xd9\x86\xd8\xaa\xd8\xae\xd8\xa7\xd8\xa8 \xd9\x81\xd8\xb1\xd9\x85\xd8\xa7\xdb\x8c\xdb\x8c\xd8\xaf *' , value : 0 },\n            { label: '\xd8\xa8\xd8\xb1\xd9\x86\xd8\xa7\xd9\x85\xd9\x87 \xd9\x86\xd9\x88\xdb\x8c\xd8\xb3' , value : '\xd8\xa8\xd8\xb1\xd9\x86\xd8\xa7\xd9\x85\xd9\x87 \xd9\x86\xd9\x88\xdb\x8c\xd8\xb3' },\n            { label: '\xd8\xa8\xd8\xb1\xd9\x86\xd8\xa7\xd9\x85\xd9\x87 \xd9\x86\xd9\x88\xdb\x8c\xd8\xb3 \xd9\x85\xd8\xa8\xd8\xaa\xd8\xaf\xdb\x8c' , value : '\xd8\xa8\xd8\xb1\xd9\x86\xd8\xa7\xd9\x85\xd9\x87 \xd9\x86\xd9\x88\xdb\x8c\xd8\xb3 \xd9\x85\xd8\xa8\xd8\xaa\xd8\xaf\xdb\x8c' },\n            { label: '\xd8\xa8\xd8\xb1\xd9\x86\xd8\xa7\xd9\x85\xd9\x87 \xd9\x86\xd9\x88\xdb\x8c\xd8\xb3 \xd8\xa8\xd8\xa7 \xd8\xaa\xd8\xac\xd8\xb1\xd8\xa8\xd9\x87' , value : '\xd8\xa8\xd8\xb1\xd9\x86\xd8\xa7\xd9\x85\xd9\x87 \xd9\x86\xd9\x88\xdb\x8c\xd8\xb3 \xd8\xa8\xd8\xa7 \xd8\xaa\xd8\xac\xd8\xb1\xd8\xa8\xd9\x87' },\n            { label: '\xd9\x85\xd8\xaf\xdb\x8c\xd8\xb1' , value : '\xd9\x85\xd8\xaf\xdb\x8c\xd8\xb1' },\n            { label: '\xd8\xaf\xd8\xb1\xd8\xad\xd8\xa7\xd9\x84 \xdb\x8c\xd8\xa7\xd8\xaf\xda\xaf\xdb\x8c\xd8\xb1\xdb\x8c' , value : '\xd8\xaf\xd8\xb1\xd8\xad\xd8\xa7\xd9\x84 \xdb\x8c\xd8\xa7\xd8\xaf\xda\xaf\xdb\x8c\xd8\xb1\xdb\x8c' },\n            { label: '\xd9\x85\xd8\xaf\xd8\xb1\xd8\xb3' , value : '\xd9\x85\xd8\xaf\xd8\xb1\xd8\xb3' },\n            { label: '\xd8\xaf\xd8\xa7\xd9\x86\xd8\xb4\xd8\xac\xd9\x88' , value : '\xd8\xaf\xd8\xa7\xd9\x86\xd8\xb4\xd8\xac\xd9\x88' },\n            { label: '\xd8\xb3\xd8\xa7\xdb\x8c\xd8\xb1' , value : '\xd8\xb3\xd8\xa7\xdb\x8c\xd8\xb1' }\n\n        ]\n\n        const { errors , displaySocialInputs } = this.state\n        let socialInputes\n\n        if ( displaySocialInputs ) {\n            socialInputes = (\n                    <div>\n                        <InputGroup \n                            placeholder="\xd8\xa2\xd8\xaf\xd8\xb1\xd8\xb3 \xd8\xb4\xd8\xa8\xda\xa9\xd9\x87 \xd8\xaa\xd9\x88\xd8\xa6\xdb\x8c\xd8\xaa\xd8\xb1"\n                            name="twitter"\n                            icon="fab fa-twitter"\n                            value={this.state.twitter}\n                            onChange={this.onChange}\n                            error={errors.twitter}\n                        />\n\n\n                        <InputGroup \n                            placeholder="\xd8\xa2\xd8\xaf\xd8\xb1\xd8\xb3 \xd8\xb4\xd8\xa8\xda\xa9\xd9\x87 \xd9\x81\xdb\x8c\xd8\xb3\xd8\xa8\xd9\x88\xda\xa9"\n                            name="facebook"\n                            icon="fab fa-facebook"\n                            value={this.state.facebook}\n                            onChange={this.onChange}\n                            error={errors.facebook}\n                        />\n\n                        <InputGroup \n                            placeholder="\xd8\xa2\xd8\xaf\xd8\xb1\xd8\xb3 \xd8\xb4\xd8\xa8\xda\xa9\xd9\x87 \xd9\x84\xdb\x8c\xd9\x86\xda\xa9\xd8\xaf\xd9\x86"\n                            name="linkedin"\n                            icon="fab fa-linkedin"\n                            value={this.state.linkedin}\n                            onChange={this.onChange}\n                            error={errors.linkedin}\n                        />\n\n\n                        <InputGroup \n                            placeholder="\xd8\xa2\xd8\xaf\xd8\xb1\xd8\xb3 \xd8\xb4\xd8\xa8\xda\xa9\xd9\x87 \xdb\x8c\xd9\x88\xd8\xaa\xdb\x8c\xd9\x88\xd8\xa8"\n                            name="youtube"\n                            icon="fab fa-youtube"\n                            value={this.state.youtube}\n                            onChange={this.onChange}\n                            error={errors.youtube}\n                        />\n\n\n                        <InputGroup \n                            placeholder="\xd8\xa2\xd8\xaf\xd8\xb1\xd8\xb3 \xd8\xb4\xd8\xa8\xda\xa9\xd9\x87 \xd8\xa7\xdb\x8c\xd9\x86\xd8\xb3\xd8\xaa\xd8\xa7\xda\xaf\xd8\xb1\xd9\x85"\n                            name="instagram"\n                            icon="fab fa-instagram"\n                            value={this.state.instagram}\n                            onChange={this.onChange}\n                            error={errors.instagram}\n                        />\n\n                    </div>\n            )\n        }\n\n        return (\n            <div className="create-profile">\n                <div className="container">\n                    <div className="row">\n                        <div className="col-md-8 m-auto">\n                            <h1 className="display-4 text-center">\xd8\xb3\xd8\xa7\xd8\xae\xd8\xaa \xd9\xbe\xd8\xb1\xd9\x88\xd9\x81\xd8\xa7\xdb\x8c\xd9\x84 \xd8\xb4\xd9\x85\xd8\xa7</h1>\n                            <p className="lead text-center">\xdb\x8c\xda\xa9 \xd9\x85\xd8\xb9\xd8\xb1\xd9\x81\xdb\x8c \xd8\xae\xd9\x88\xd8\xa8 \xd9\x88\xd8\xb5\xd8\xb9\xd8\xaa \xda\xa9\xd8\xa7\xd8\xb1\xd8\xaa\xd8\xa7\xd9\x86 \xd8\xb1\xd8\xa7 \xd8\xa8\xdb\x8c\xd8\xb4\xd8\xaa\xd8\xb1 \xd9\x85\xdb\x8c \xda\xa9\xd9\x86\xd8\xaf</p>\n                            <small className="d-block bp-3 text-right">\xd9\x81\xdb\x8c\xd9\x84\xd8\xaf\xd9\x87\xd8\xa7\xdb\x8c \xd8\xb3\xd8\xaa\xd8\xa7\xd8\xb1\xd9\x87 \xd8\xaf\xd8\xa7\xd8\xb1 * \xd8\xa7\xd8\xac\xd8\xa8\xd8\xa7\xd8\xb1\xdb\x8c \xd9\x85\xdb\x8c \xd8\xa8\xd8\xa7\xd8\xb4\xd9\x86\xd8\xaf</small>\n                            <form onSubmit={ this.onSubmit }>\n\n                                <TextFieldGroup \n                                    placeholder="\xd9\x87\xd9\x86\xd8\xaf\xd9\x84\xd8\xb1 \xd9\xbe\xd8\xb1\xd9\x88\xd9\x81\xd8\xa7\xdb\x8c\xd9\x84 *"\n                                    name="handle"\n                                    value={this.state.handle}\n                                    onChange={this.onChange}\n                                    error={errors.handle}\n                                    info="\xd9\x85\xd9\x86\xd8\xb8\xd9\x88\xd8\xb1 \xd8\xa7\xd8\xb2 handle \xd8\xaf\xd8\xa7\xd8\xb4\xd8\xaa\xd9\x86 URL \xd8\xa7\xd8\xae\xd8\xaa\xd8\xb5\xd8\xa7\xd8\xb5\xdb\x8c \xd9\xbe\xd8\xb1\xd9\x88\xd9\x81\xd8\xa7\xdb\x8c\xd9\x84 \xd8\xb4\xd9\x85\xd8\xa7\xd8\xb3\xd8\xaa"\n                                />\n\n\n                                <SelectListGroup \n                                    placeholder="\xd9\x88\xd8\xb6\xd8\xb9\xdb\x8c\xd8\xaa"\n                                    name="status"\n                                    value={this.state.status}\n                                    onChange={this.onChange}\n                                    error={errors.status}\n                                    options={options}\n                                    info="\xd8\xaa\xd8\xb5\xd9\x88\xdb\x8c\xd8\xb1\xdb\x8c \xd8\xa7\xd8\xb2 \xd9\x88\xd8\xb6\xd8\xb9\xdb\x8c\xd8\xaa \xda\xa9\xd9\x86\xd9\x88\xd9\x86\xdb\x8c \xd8\xb4\xd9\x85\xd8\xa7"\n                                />\n\n                                <TextFieldGroup \n                                    placeholder="\xd8\xb4\xd8\xb1\xda\xa9\xd8\xaa"\n                                    name="company"\n                                    value={this.state.company}\n                                    onChange={this.onChange}\n                                    error={errors.company}\n                                    info="\xd8\xb4\xd8\xb1\xda\xa9\xd8\xaa \xd8\xae\xd9\x88\xd8\xaf\xd8\xaa\xd8\xa7\xd9\x86 \xdb\x8c\xd8\xa7 \xd8\xac\xd8\xa7\xdb\x8c\xdb\x8c \xda\xa9\xd9\x87 \xd8\xaf\xd8\xb1 \xd8\xa2\xd9\x86\xd8\xac\xd8\xa7 \xd9\x85\xd8\xb4\xd8\xba\xd9\x88\xd9\x84 \xd8\xa8\xd9\x87 \xda\xa9\xd8\xa7\xd8\xb1 \xd9\x87\xd8\xb3\xd8\xaa\xdb\x8c\xd8\xaf"\n                                />\n\n                                <TextFieldGroup \n                                    placeholder="\xd9\x88\xd8\xa8 \xd8\xb3\xd8\xa7\xdb\x8c\xd8\xaa"\n                                    name="website"\n                                    value={this.state.website}\n                                    onChange={this.onChange}\n                                    error={errors.website}\n                                    info="\xd9\x88\xd8\xa8 \xd8\xb3\xd8\xa7\xdb\x8c\xd8\xaa \xd8\xae\xd9\x88\xd8\xaf\xd8\xaa\xd8\xa7\xd9\x86 \xdb\x8c\xd8\xa7 \xd8\xac\xd8\xa7\xdb\x8c\xdb\x8c\xda\xa9\xd9\x87 \xda\xa9\xd8\xa7\xd8\xb1 \xd9\x85\xdb\x8c \xda\xa9\xd9\x86\xdb\x8c\xd8\xaf"\n                                />\n\n                                <TextFieldGroup \n                                    placeholder="\xd9\x85\xd8\xad\xd9\x84"\n                                    name="location"\n                                    value={this.state.location}\n                                    onChange={this.onChange}\n                                    error={errors.location}\n                                    info="\xd8\xb4\xd9\x87\xd8\xb1 \xdb\x8c\xd8\xa7 \xd8\xa7\xd8\xb3\xd8\xaa\xd8\xa7\xd9\x86 \xd9\x88 \xd8\xb4\xd9\x87\xd8\xb1"\n                                />\n\n                                <TextFieldGroup \n                                    placeholder="\xd9\x85\xd9\x87\xd8\xa7\xd8\xb1\xd8\xaa \xd9\x87\xd8\xa7 *"\n                                    name="skills"\n                                    value={this.state.skills}\n                                    onChange={this.onChange}\n                                    error={errors.skills}\n                                    info="\xd8\xa8\xd8\xb1\xd8\xa7\xdb\x8c \xd8\xac\xd8\xaf\xd8\xa7 \xd8\xb3\xd8\xa7\xd8\xb2\xdb\x8c \xd8\xb9\xd8\xa8\xd8\xa7\xd8\xb1\xd8\xaa \xd9\x87\xd8\xa7 \xd8\xa7\xd8\xb2 \xda\xa9\xd8\xa7\xd9\x85\xd8\xa7 \xd8\xa7\xd8\xb3\xd8\xaa\xd9\x81\xd8\xa7\xd8\xaf\xd9\x87 \xda\xa9\xd9\x86\xdb\x8c\xd8\xaf html, css, js, php"\n                                />\n\n\n                                <TextFieldGroup \n                                    placeholder="\xd9\x86\xd8\xa7\xd9\x85 \xda\xa9\xd8\xa7\xd8\xb1\xd8\xa8\xd8\xb1\xdb\x8c \xd8\xb4\xd9\x85\xd8\xa7 \xd8\xaf\xd8\xb1 \xda\xaf\xdb\x8c\xd8\xaa \xd9\x87\xd8\xa7\xd8\xa8"\n                                    name="githubusername"\n                                    value={this.state.githubusername}\n                                    onChange={this.onChange}\n                                    error={errors.githubusername}\n                                    info="\xd8\xa8\xd8\xb1\xd8\xa7\xdb\x8c \xd8\xa7\xdb\x8c\xd8\xac\xd8\xa7\xd8\xaf \xd8\xa7\xd8\xb1\xd8\xaa\xd8\xa8\xd8\xa7\xd8\xb7 \xd9\x88 \xd8\xaf\xd8\xb3\xd8\xaa\xd8\xb1\xd8\xb3\xdb\x8c \xd8\xa8\xd9\x87 \xd9\x85\xd8\xae\xd8\xa7\xd8\xb2\xd9\x86 \xd8\xb9\xd9\x85\xd9\x88\xd9\x85\xdb\x8c \xd8\xb4\xd9\x85\xd8\xa7 \xd9\x84\xd8\xb7\xd9\x81\xd8\xa7 \xd9\x86\xd8\xa7\xd9\x85 \xda\xa9\xd8\xa7\xd8\xb1\xd8\xa8\xd8\xb1\xdb\x8c \xd8\xae\xd9\x88\xd8\xaf\xd8\xaa\xd8\xa7\xd9\x86 \xd8\xb1\xd8\xa7 \xd9\x88\xd8\xa7\xd8\xb1\xd8\xaf \xd9\x81\xd8\xb1\xd9\x85\xd8\xa7\xdb\x8c\xdb\x8c\xd8\xaf"\n                                />\n\n                                <TextAreaFieldGroup \n                                    placeholder="\xd9\x85\xd8\xae\xd8\xaa\xd8\xb5\xd8\xb1\xdb\x8c \xd8\xa7\xd8\xb2 \xd8\xae\xd9\x88\xd8\xaf\xd8\xaa\xd8\xa7\xd9\x86"\n                                    name="bio"\n                                    value={this.state.bio}\n                                    onChange={this.onChange}\n                                    error={errors.bio}\n                                    info="\xd9\x84\xd8\xb7\xd9\x81\xd8\xa7 \xd8\xaa\xd9\x88\xd8\xb6\xdb\x8c\xd8\xad \xd9\x85\xd8\xae\xd8\xaa\xd8\xb5\xd8\xb1\xdb\x8c \xd8\xa7\xd8\xb2 \xd8\xae\xd9\x88\xd8\xaf\xd8\xaa\xd8\xa7\xd9\x86 \xd8\xa8\xd8\xb1\xd8\xa7\xdb\x8c \xd8\xb9\xd9\x84\xd8\xa7\xd9\x82\xd9\x85\xd9\x86\xd8\xaf\xd8\xa7\xd9\x86 \xd8\xae\xd9\x88\xd8\xaf\xd8\xaa\xd8\xa7\xd9\x86 \xd8\xa8\xd9\x86\xd9\x88\xdb\x8c\xd8\xb3\xd8\xaf"\n                                />\n\n                                <div className="mb-3 text-right">\n                                    <button\n                                        type="button"                                        \n                                        className="btn btn-light" onClick={ () => {\n                                        this.setState(( prevState)=>({ displaySocialInputs: !prevState.displaySocialInputs }))\n                                    }}>\n                                                \xd8\xa7\xd8\xb6\xd8\xa7\xd9\x81\xd9\x87 \xda\xa9\xd8\xb1\xd8\xaf\xd9\x86 \xda\xa9\xd8\xa7\xd9\x86\xda\xa9\xd8\xb4\xd9\x86 \xd8\xaf\xd8\xb1 \xd9\x85\xd8\xaf\xdb\x8c\xd8\xa7\n                                    </button>\n                                    <span className="text-muted">\xd8\xa7\xd8\xae\xd8\xaa\xdb\x8c\xd8\xa7\xd8\xb1\xdb\x8c \xd9\x85\xdb\x8c\xd8\xa8\xd8\xa7\xd8\xb4\xd8\xaf</span>\n                                </div>\n                                        { socialInputes }\n                                        <input type="submit" value="\xd8\xab\xd8\xa8\xd8\xaa" className="btn btn-info btn-block mt-4" />\n                            </form>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        )\n    }\n}\n\nCreateProfile.propTypes = {\n    profile: PropTypes.object.isRequired,\n    errors: PropTypes.object.isRequired\n}\n\nconst mapStateToProps = ( state ) => {\n    return {\n        profile: state.profile,\n        errors: state.errors\n    }\n}\n\nexport default connect( mapStateToProps , { createProfile })( withRouter( CreateProfile ) )\n\n

\n

我的行动文件

\n

export const createProfile = ( profileData , history ) => ( dispatch ) => {\n  axios.post( '/api/profile' , profileData )\n  .then(( result ) =>{\n    history.push('/dashboard') \n  }).catch(( errors )=> {\n    dispatch({\n      type: GET_ERRORS,\n      payload: errors.response.data\n    })\n  })\n}\n

\n

Answer 1

react-router-dom6版本后push.history发生了变化。

Push.history('/dashboard')-->navigate('/dashboard')

使用usenavigate钩子的示例：

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

function Invoices() {
  let navigate = useNavigate();
  return (
    <div>
      <NewInvoiceForm
        onSubmit={async (event) => {
          let newInvoice = await createInvoice(
            event.target
          );
          navigate(`/invoices/${newInvoice.id}`);
        }}
      />
    </div>
  );
}