Question

我正在使用ReactJS教程，当我使用React Router 4时，使用React Router 3.在教程中的某一点，路由以编程方式完成，就像这样

import React from "react";
import { browserHistory } from "react-router";

export class User extends React.Component {
    onNavigateHome() {
        browserHistory.push("/home");
    }

    render() {
        return (
            <div>
                <h3>The User Page</h3>
                <p>User ID: {this.props.params.id}</p>
                <button onClick={this.onNavigateHome} className="btn btn-primary">Go Home!</button>
            </div>
        );
    }
}

~~我做了一些研究，似乎在React Router 4中我必须创造自己的历史。~~

我使用了withRouter

import React from "react";
import { Route, Redirect, withRouter } from "react-router-dom";

export class User extends React.Component {

    onNavigateHome() {
        this.props.history.push("/home")
        {/*<Redirect push to="/home"/>*/}
    }

    render() {
        return (
            <div>
                <h3>The User Page</h3>
                <p>User ID: </p>
                <button onClick={() => this.onNavigateHome()} className="btn btn-primary">Go home!</button>
            </div>
        );
    }
}

export default withRouter(User);

~~但我不确定如何使用我创建的历史记录。在React Router 4中执行此操作的优先方法是什么？~~

我还看了Redirect的替代解决方案。我无法让这个工作。有什么建议我缺少什么？

import React from "react";
import { Route, Redirect, withRouter } from "react-router-dom";

export class User extends React.Component {

    onNavigateHome() {
        <Redirect push to="/home"/>
    }

    render() {
        return (
            <div>
                <h3>The User Page</h3>
                <p>User ID: </p>
                <button onClick={this.onNavigateHome} className="btn btn-primary">Go home!</button>
            </div>
        );
    }
}

React Router 4中浏览器History.push（“/ LINK”）的首选方式

0 个答案: