如何使用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"));
    });
});
普拉卡什·坎德尔(Prakash Kandel)

如果您已经在使用React Router 4,则只需执行以下操作即可在组件中获取路由器历史记录。确保在路由器内部渲染组件,否则必须以其他方式进行处理。可以通过在组件中打印this.props进行检查。如果它具有历史记录,则执行以下操作,否则执行下面的下一个逻辑。

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

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

import { withRouter } from 'react-router';

... your react component 

export default withRouter(yourcomponent);

这样,它将路由器历史记录作为道具注入。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

不确定如何使用react-router v4实现history.push

使用react-router v4的this.props.history.push打开窗口?

React-Router v4。如何将参数附加到URL?TypeError:history.push不是函数

history.location.replace不是使用react-router v4的功能

如果react-router4中的位置不变,如何防止history.push?

使用react-router-dom的history.push

如果使用 history.push 访问特定路由,React-Router v5 不会重定向

如何使用Jest通过调用history.push来测试React-Router导航?

如何使用Jest模拟新的React Router Hooks的history.push

使用带有action-router-v4的动作创建者中的history.push吗?

在 React Router V4 中将 browserHistory.push('/login') 表单 v2 更改为替代

如何使用 history.push 在 React 中获取参数

正确使用 react router v4

如何使用 history.push 传递道具

React router history.push 回退到 404 路由

react-router重定向vs history.push

在React Router中,如何删除/更改我之前发送的history.push中的参数?

在 react-router 中使用 history.push() 传递道具时出现问题

使用react-router的history.push()和自定义URL参数

在React Router中使用history.push()时需要刷新的问题

React history.push自动重定向

如何测试history.push内部动作?

redux-react-route v4 / v5 push()在重击动作中不起作用

React-Routing 使用 history.push() 获取 404 页面

无法使用history.push来异步路由,React JS

不同的布局-React Router v4

React Router v4闪烁的URL

React Router v4参数

React Router v4中的indexLink