Как перейти на домашнюю страницу после отправки формы в веб-реагировании, используя react-router-dom v6.2.1?

Question

У меня есть страница класса компонента Smart PhoneDirectory.js, где я использовал BrowserRouter и Route для маршрутизации на страницу ShowSubscribers ("/") и страницу AddSubscribers ("/add"). Мое требование - перенаправить на страницу ShowSubscribers ("/") после отправки формы на странице AddSubscribers, но не понимаю, как это реализовать. Я пытался использовать 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("/"), но это не сработало.

javascript reactjs react-router-dom

0

abhishek narayan 19 Янв 2022 в 15:41

Answer 1

Я предлагаю, что react-router-dom v6 поддерживает только версию хуков, поскольку вы используете компонент класса для понижения версии react-router-dom в package.json.

  "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>)}
}

2

Borni.Mr 19 Янв 2022 в 16:07

Answer 2

Я думаю, вам нужно обернуть страницу AddSubscriber с помощью withRouter HOC

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

export default withRouter(AddSubscriber)

0

Wraithy 19 Янв 2022 в 15:53

withRouter не используется в React-Router v6.

–

AKX

19 Янв 2022 в 15:55

Answer 3

Вам нужна навигационная логика (this.props.history.push("/")) находиться на странице addScubscribers. (вместо этого у вас есть это на «домашней странице»)

0

happyZZR1400 19 Янв 2022 в 15:54

1

history.push() был заменен на navigate() в React-Router v6.

–

AKX

19 Янв 2022 в 15:55

Как перейти на домашнюю страницу после отправки формы в веб-реагировании, используя react-router-dom v6.2.1?

3 ответа

Похожие вопросы

Новые вопросы

javascript