如何使用 React 的 Router v4 history.push() [英] How to use React's Router v4 history.push()

问题描述

注意:我是 React 和 Meteor 的新手，所以在回答我的问题时请非常具体.

我正在尝试使用meteor 和react 制作一个短信应用程序，但是，我使用的教程使用的是React v3，我想知道如何在v4 中使用browserHistory.push() 或browserHistory.replace() 将用户发送到另一个页面.到目前为止，我正在做一个页面，他们可以在其中将他们的名字设置为他们想要的任何内容，然后将他们链接到聊天页面.我知道网上有很多关于这方面的文章和文档，但它们都是非常复杂的例子.如果可以，你能告诉我最基本的方法，我可以将某人重定向到另一个页面.

SetName.js:

从react"导入React；从'react-router-dom'导入{ BrowserRouter}导出默认类 SetName 扩展 React.Component{验证名称(e){e.preventDefault();让名称 = this.refs.name.value;如果(名称){控制台日志(名称)；}this.props.history.push('/asd')}使成为(){返回(<div><form onSubmit={this.validateName.bind(this)}><h1>输入名称</h1><input ref="name" type="text"/><button>进入聊天</button></表单>

)}}

ma​​in.js

从react"导入React；从react-dom"导入 ReactDOM；从流星/流星"导入{流星}；从流星/跟踪器"导入 {Tracker}；从react-router-dom"导入 { BrowserRouter, Route, Switch }从./../imports/api/Text"导入{Texts}；从./../imports/ui/App"导入应用程序；从./../imports/ui/Name"导入名称；从./../imports/ui/NotFound"导入 NotFound；从./../imports/ui/SetName"导入 SetName；Meteor.startup(() => {Tracker.autorun(() => {让文本 = Texts.find().fetch();const 路由 = (<浏览器路由器><开关><App path="/chat" texts={texts}/><SetName path="/setName"/><路由组件={NotFound}/></开关></BrowserRouter>);ReactDOM.render(routes, document.getElementById("app"));});});

解决方案

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

this.props.history.push('你的路由位置').

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

import { withRouter } from 'react-router';...你的反应组件导出默认 withRouter(yourcomponent);

通过这种方式，它会将路由器历史记录作为道具注入您的组件中.

NOTE: I am fairly new to React and Meteor, so please be very specific when answering my question.

I am attempting to make a texting app using meteor and react, however, the tutorial I am using is using React v3 and I want to know how to do the same thing in v4 which is to use browserHistory.push() or browserHistory.replace() to send the user to another page. So far, I am doing a page where they can set their name to whatever they want, and then links them to the chat page. I know there are plenty of articles online and documentation on this but they are all in pretty complex examples. If you could, can you tell me the most basic way I can redirect someone to another page.

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

解决方案

If you are already using react router 4, then you can simply do the following to get the router history in your component. Make sure you are rendering your component inside router, Otherwise you have to do it on different way.You can check this by printing this.props in your component. If it has history, then do the following otherwise do the next logic from below.

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

If your component is not inside the router, then do the following

import { withRouter } from 'react-router';

... your react component 

export default withRouter(yourcomponent);

this way it injects the router history in your component as a props.

这篇关于如何使用 React 的 Router v4 history.push()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！