Как использовать React Router v4 history.push()

ПРИМЕЧАНИЕ. Я новичок в React и Meteor, поэтому, отвечая на мой вопрос, будьте предельно конкретны.

Я пытаюсь создать текстовое приложение, используя метеор и реагировать, однако учебник, который я использую, использует React v3, и я хочу знать, как сделать то же самое в v4, а именно использовать browserHistory.push() или browserHistory.replace (), чтобы отправить пользователя на другую страницу. Пока что я делаю страницу, где они могут установить свое имя как угодно, а затем связать их со страницей чата. Я знаю, что в Интернете есть много статей и документации по этому вопросу, но все они представляют собой довольно сложные примеры. Если бы вы могли, не могли бы вы рассказать мне самый простой способ, которым я могу перенаправить кого-то на другую страницу.

SetName.js:

import React from "react";
import { BrowserRouter } from 'react-router-dom'

export default class SetName extends React.Component{
    validateName(e){
        e.preventDefault();
        let name = this.refs.name.value;
        if(name){
            console.log(name);
        }
        this.props.history.push('/asd')
    }
    render(){
        return(
            <div>
                <form onSubmit={this.validateName.bind(this)}>
                    <h1>Enter a  Name</h1>
                    <input ref="name" type="text"/>
                    <button>Go to Chat</button>
                </form>
            </div>
        )
    }
}

main.js

import React from "react";
import ReactDOM from "react-dom";
import {Meteor} from "meteor/meteor";
import {Tracker} from "meteor/tracker";
import { BrowserRouter, Route, Switch } from 'react-router-dom'

import {Texts} from "./../imports/api/Text";
import App from "./../imports/ui/App";
import Name from "./../imports/ui/Name";
import NotFound from "./../imports/ui/NotFound";
import SetName from "./../imports/ui/SetName";

Meteor.startup(() => {
    Tracker.autorun(() => {
        let texts = Texts.find().fetch();
        const routes = (
            <BrowserRouter>
                <Switch>
                    <App path="/chat" texts={texts}/>
                    <SetName path="/setName" />
                    <Route component={NotFound}/>
                </Switch>
            </BrowserRouter>
        );
        ReactDOM.render(routes, document.getElementById("app"));
    });
});

reactjs react-router meteor react-router-v4
person Stuart Fong    schedule 14.08.2017    source источник

Ответы (1)


arrow_upward
9
arrow_downward

Если вы уже используете реактивный маршрутизатор 4, вы можете просто сделать следующее, чтобы получить историю маршрутизатора в своем компоненте. Убедитесь, что вы визуализируете свой компонент внутри маршрутизатора, в противном случае вам придется делать это другим способом. Вы можете проверить это, напечатав this.props в своем компоненте. Если у него есть история, то сделайте следующее, в противном случае выполните следующую логику снизу.

this.props.history.push('your routing location').

Если вашего компонента нет внутри роутера, то сделайте следующее

import { withRouter } from 'react-router';

... your react component 

export default withRouter(yourcomponent);

таким образом он вводит историю маршрутизатора в ваш компонент в качестве реквизита.

person Prakash Kandel    schedule 14.08.2017
comment
Когда я это делаю, я получаю сообщение об ошибке Uncaught TypeError: Cannot read property 'push' of undefined Я добавил свой файл main.js выше, чтобы вы могли его проверить. - person Stuart Fong; 14.08.2017
comment
измените свой validateName(e) {} на validateName = (e) =› {}, чтобы он имел доступ к этому ключевому слову на уровне класса, иначе он будет обрабатывать это только внутри функции. - person Prakash Kandel; 14.08.2017