如何使用react-router-domv6.2.1在reactweb中提交表單后導航到主頁？

我有一個 Smart 組件類頁面 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("/")，但沒有奏效。

uj5u.com熱心網友回復：

react-router-dom v6 僅支持我建議的鉤子版本，因為您使用類組件來降級 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>)}
}

uj5u.com熱心網友回復：

我認為您需要使用withRouter HOC包裝您的AddSubscriber頁面

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

export default withRouter(AddSubscriber)

uj5u.com熱心網友回復：

您需要導航邏輯 ( this.props.history.push("/")) 位于 addScubscribers 頁面。（你有它在“主頁”而不是）

標籤：

上一篇：如何轉換陣列？

下一篇：屬性“targetNamespace”不允許出現在元素中