reactjs - 如何使用 React Router v4 History.push()

Question

这个问题已经有答案了:

Programmatically navigating in React-Router v4 (4 个回答)

已关闭 5 年前。

注意:我对 React 和 Meteor 还很陌生，所以在回答我的问题时请非常具体。

我正在尝试使用meteor和react制作一个短信应用程序，但是，我正在使用的教程是使用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>
        )
    }
}

ma​​in.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"));
    });
});

Answer 1

如果您已经在使用 React Router 4，那么您只需执行以下操作即可获取组件中的路由器历史记录。确保您在路由器内渲染组件，否则您必须以不同的方式执行此操作。您可以通过打印 this.props 来检查这一点在你的组件中。如果它有历史记录，则执行以下操作，否则执行下面的下一个逻辑。

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

如果您的组件不在路由器内部，则执行以下操作

import { withRouter } from 'react-router';

... your react component 

export default withRouter(yourcomponent);

这样它就会将路由器历史记录作为 Prop 注入(inject)到您的组件中。