使用React Router以编程方式导航

react-router-dom：5.1.2

• 该站点有3个页面，所有页面均在浏览器中动态呈现。

• 尽管页面永远不会刷新，但是请注意当您浏览站点时，React Router如何使URL保持最新。这样可以保留浏览器的历史记录，确保后退按钮和书签之类的内容正常运行

• 一个开关看起来通过其所有的子元素，并呈现第一个其路径当前URL匹配。任何时候都可以使用多条路线，但是一次只希望其中一条呈现

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";



export default function BasicExample() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/dashboard">Dashboard</Link>
          </li>
        </ul>

        <hr />

        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/dashboard">
            <Dashboard />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

// You can think of these components as "pages"
// in your app.

function Home() {
  return (
    <div>
      <h2>Home</h2>
    </div>
  );
}

function About() {
  return (
    <div>
      <h2>About</h2>
    </div>
  );
}

function Dashboard() {
  return (
    <div>
      <h2>Dashboard</h2>
    </div>
  );
}```

这对我有用，不需要特殊的进口：

<input 
  type="button" 
  name="back" 
  id="back" 
  class="btn btn-primary" 
  value="Back" 
  onClick={() => { this.props.history.goBack() }} 
/>

您还可以useHistory在无状态组件中使用挂钩。文档中的示例。

import { useHistory } from "react-router"

function HomeButton() {
  const history = useHistory()

  return (
    <button type="button" onClick={() => history.push("/home")}>
      Go home
    </button>
  )
}

注意：添加了挂钩react-router@5.1.0并要求react@>=16.8

React-Router V4

如果您使用的是版本4，则可以使用我的库（Shameless插件），您只需在其中分配一个动作，一切就可以正常工作！

dispatch(navigateTo("/aboutUs"));

特里普勒

根据先前的
何塞·安东尼奥·波斯托戈和本·惠勒
的答案的新颖性？用Typescript编写，
并使用 decorator
或静态属性/字段

import * as React from "react";
import Component = React.Component;
import { withRouter } from "react-router";

export interface INavigatorProps {
    router?: ReactRouter.History.History;
}

/**
 * Note: goes great with mobx 
 * @inject("something") @withRouter @observer
 */
@withRouter
export class Navigator extends Component<INavigatorProps, {}>{
    navigate: (to: string) => void;
    constructor(props: INavigatorProps) {
        super(props);
        let self = this;
        this.navigate = (to) => self.props.router.push(to);
    }
    render() {
        return (
            <ul>
                <li onClick={() => this.navigate("/home")}>
                    Home
                </li>
                <li onClick={() => this.navigate("/about")}>
                    About
                </li>
            </ul>
        )
    }
}

/**
 * Non decorated 
 */
export class Navigator2 extends Component<INavigatorProps, {}> {

    static contextTypes = {
        router: React.PropTypes.object.isRequired,
    };

    navigate: (to: string) => void;
    constructor(props: INavigatorProps, context: any) {
        super(props, context);
        let s = this;
        this.navigate = (to) =>
            s.context.router.push(to);
    }
    render() {
        return (
            <ul>
                <li onClick={() => this.navigate("/home")}>
                    Home
                </li>
                <li onClick={() => this.navigate("/about")}>
                    About
                </li>
            </ul>
        )
    }
}

无论今天安装了什么npm。“反应路由器”：“ ^ 3.0.0”和
“ @ types /反应路由器”：“ ^ 2.0.41”

在React Router v4中。我遵循两种方式以编程方式进行路由。

1. this.props.history.push("/something/something")
2. this.props.history.replace("/something/something")

第二

替换历史记录堆栈上的当前条目

要获得道具的历史记录，您可能需要用

与路由器

警告：此答案仅涵盖1.0之前的ReactRouter版本

之后，我将以1.0.0-rc1用例更新此答案！

您也可以不使用mixins。

let Authentication = React.createClass({
  contextTypes: {
    router: React.PropTypes.func
  },
  handleClick(e) {
    e.preventDefault();
    this.context.router.transitionTo('/');
  },
  render(){
    return (<div onClick={this.handleClick}>Click me!</div>);
  }
});

带有上下文的陷阱是，除非您contextTypes在类上定义，否则无法访问。

至于什么是上下文，它是一个像道具一样的对象，它从父级传递到子级，但是隐式地传递下来，而不必每次都重新声明道具。参见https://www.tildedave.com/2014/11/15/introduction-to-contexts-in-react-js.html