React-Router

January 5, 2017

go to a link

code

// if using react-router (v2+)
import { browserHistory } from "react-router";
browserHistory.push("/some/path");

// if using newer react-router API inside components (v3+)
this.props.history.push("/some/path");

// if using react-router-redux
import { push } from "react-router-redux";
this.props.dispatch(push("/some/path"));

go to a link on button click

code

<button onClick={() => browserHistory.push("my/link/")}>Let's go!</button>

got to a link and send URL params, query, state whatever along

code

<button
  onClick={() =>
    browserHistory.push({
      pathname: "/about/",
      query: { name: "tasiomind" },
      state: { name: "tasiomind" },
    })
  }
>
  Let's go!
</button>

the above is the same as doing this: browserHistory.push("/about/?name=tasiomind").

You can access query values (e.g. NAME) in React with this.props.query.NAME or this.props.location.query.NAME and state with this.props.location.state.NAME

React-Router

Programmatic Navigation

Links