如何使用 react-router-dom v6.2.1 在 react web 中提交表单后导航到主页？

Question

我有一个智能组件 class 页面 PhoneDirectory.js，我在其中使用 BrowserRouter 和 Route 路由到 ShowSubscribers 页面（“/”）和 AddSubscribers 页面（“/add”）。我的要求是在 AddSubscribers 页面上提交表单后重定向到 ShowSubscribers 页面（“/”），但不了解如何实现它。我尝试使用 this.props.history.push("/") 但它不起作用。我是 React 的新手，有人可以帮忙吗？

import React from 'react';
import AddSubscriber from './AddSubscriber';
import ShowSubscribers from './ShowSubscribers';
import {BrowserRouter , Route, Routes} from 'react-router-dom';

export default class PhoneDirectory extends React.Component{
    constructor(){
        super();
        this.state = {[]};
    }

    addSubscribers = (subscribers) =>{...}

    deleteSubscribers = (subscriberId) =>{...}

    render() { 
        return (
        <BrowserRouter>
            <Routes>
                <Route exact path='/' element={<ShowSubscribers deleteSubscribers={this.deleteSubscribers} subscribersList={this.state.subscribersList}/>}/>
                <Route exact path='/add' element={<AddSubscriber addSubscribers={this.addSubscribers}/>}/>
            </Routes>
        </BrowserRouter>
        )
    }
}

哑组件 AddSubscriber 页面

import React from 'react';
import Header from './Header';
import './AddSubscriber.css';
import {Link} from "react-router-dom";

export default class AddSubscriber extends React.Component {
    constructor() {
        super();
        this.state = {
            id: 0,
            name:'',
            phone:''
        }
    }

    onChangeHandler = (event) =>{...}

    onFormSubmitted = (event) =>{
        event.preventDefault();
        this.props.addSubscribers(this.state);
        this.setState({id:0, name:"", phone:''});
        // Need logic to redirect to "/" i.e., ShowSubscribers page
    }

    render() {
    return (<div>
        <Header heading="Add Subscriber"/>
        <div className="component-body-container">
            <Link to="/">
            <button className="custom-btn">Back</button>
            </Link>
            <form className="subscriber-form" onSubmit={this.onFormSubmitted.bind(this)}>
                    ...............
                    <button type="submit" className="custom-btn add-btn">Add</button>
                </div>
            </form>
        </div>
    </div>)}
}

我尝试了 this.props.history.push("/")，但没有成功。

Answer 1

我认为您需要使用 withRouter HOC

包装您的 AddSubscriber 页面

class AddSubscriber extends React.Component{
...some-code....
}

export default withRouter(AddSubscriber)

Answer 2

您需要导航逻辑 (this.props.history.push("/")) 位于 addScubscribers 页面。（你有它在“主页”而不是）

Answer 3

react-router-dom v6 仅支持 hooks 版本我建议因为你使用 class 组件来降级 package.json 中的 react-router-dom 版本.

  "dependencies": {
    ...
    "react-router-dom": "5.2.1",
  },

现在你需要运行 : npm install 或 yarn install 您的 Route 组件将如下所示

import React from 'react';
import AddSubscriber from './AddSubscriber';
import ShowSubscribers from './ShowSubscribers';
import { Route, Switch, BrowserRouter as Router } from 'react-router-dom';

export default class PhoneDirectory extends React.Component{
    constructor(){
        super();
        this.state = {[]};
    }

    addSubscribers = (subscribers) =>{...}

    deleteSubscribers = (subscriberId) =>{...}

    render() { 
        return (
        <Router>
         <Switch>
                <Route exact path='/'>
                 <ShowSubscribers {...your props goes here}/>
                </Route>
                 <Route exact path='/add'>
                 <AddSubscriber {...your props goes here}/>
                </Route>
          </Switch>
        </Router>
        )
    } 
}

现在您可以拨打this.props.history.push

import React from 'react';
import Header from './Header';
import './AddSubscriber.css';

export default class AddSubscriber extends React.Component {
    constructor() {
        super();
        this.state = {
            id: 0,
            name:'',
            phone:''
        }
    }

    onChangeHandler = (event) =>{...}

    onFormSubmitted = (event) =>{
        event.preventDefault();
        this.props.addSubscribers(this.state);
        this.setState({id:0, name:"", phone:''});
        // Need logic to redirect to "/" i.e., ShowSubscribers page
    }

    render() {
    return (<div>
        <Header heading="Add Subscriber"/>
        <div className="component-body-container">
     
            <button className="custom-btn" onClick={()=>this.props.history.push('/')} >Back</button>
      
            <form className="subscriber-form" onSubmit={this.onFormSubmitted.bind(this)}>
                    ...............
                    <button type="submit" className="custom-btn add-btn">Add</button>
                </div>
            </form>
        </div>
    </div>)}
}

如何使用 react-router-dom v6.2.1 在 react web 中提交表单后导航到主页？

How to navigate to homepage upon form submit in react web using react-router-dom v6.2.1?

javascript

reactjs

react-router-dom