React Router 的简单使用

npm install -S react-router-dom history
# OR
yarn add -S react-router-dom history

import React from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import HomePage from '_pages/HomePage'
import AboutPage from '_pages/AboutPage'
import UsersPage from '_pages/UsersPage'

export default function App() {
  return (
    <Router>
      <div>
        <nav>

          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/about">About</Link></li>
            <li><Link to="/users">Users</Link></li>
          </ul>
        </nav>

        {/* A <Switch> looks through its children <Route>s and
            renders the first one that matches the current URL. */}
        <Switch>
          <Route path="/about" component={AboutPage} />
          <Route path="/users" component={UsersPage}/>
          <Route path="/" component={HomePage} />
        </Switch>
      </div>
    </Router>
  );
}

// string
import { Link } from "react-router-dom";
<Link to="/about">About</Link>

// to: object
<Link
  to={{
    pathname: "/courses",
    search: "?sort=name",
    hash: "#the-hash",
    state: { fromDashboard: true }
  }}
/>
// to: function
<Link to={location => ({ ...location, pathname: "/courses" })} />
<Link to={location => `${location.pathname}?sort=name`} />

import { Link } from "react-router-dom";
<Link to="/about" replace />

// Function
import { Link } from "react-router-dom";
<Link
  to="/"
  innerRef={node => {
    // `node` refers to the mounted DOM element
    // or null when unmounted
  }}
/>
// RefObject
let anchorRef = React.createRef()

<Link to="/" innerRef={anchorRef} />

import { NavLink } from "react-router-dom";
<NavLink exact to={path} activeClassName="selected" ></NavLink>

// activeStyle
<NavLink
  to="/faq"
  activeStyle={{
    fontWeight: "bold",
    color: "red"
  }}
>
  FAQs
</NavLink>

import { Redirect } from "react-router-dom";
<Redirect push to={path} ></Redirect>

import { createBrowserHistory } from 'history'
const history = createBrowserHistory();
<Router history={history}>
      ...
</Router>

// history.push(path, [state])
// history.replace(path, [state])
// history.go(n)
// history.goBack() 等价于 history.go(-1)
// history.goForward() 等价于 history.go(1)

import React from "react";
import PropTypes from "prop-types";
import { withRouter } from "react-router";

// A simple component that shows the pathname of the current location
class ShowTheLocation extends React.Component {
  static propTypes = {
    match: PropTypes.object.isRequired,
    location: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired
  };

  render() {
    const { match, location, history } = this.props;

    return(<div>
                <div onClick={()=> history.push('/some/Path')}>history push</div>
                <div>You are now at {location.pathname}</div>
            </div>
    )
  }
}

// Create a new component that is "connected" (to borrow redux
// terminology) to the router.
const ShowTheLocationWithRouter = withRouter(ShowTheLocation);

// 传送
<Link to="/account?name=netflix">Netflix</Link>
// 接收
const { name } = this.props.location.query

// 传送
<Link to="/account?name=netflix">Netflix</Link>
// 接收
const { name } = this.props.params

// Link
<Link to={{ pathname : ' /account' , state : { name: 'netflix' }}}> 
// 事件 - history.js
history.push('/account', { name: 'netflix' });
// 事件 - this.props.history
this.props.history.push({
    pathname: '/account',
    state: { name: 'netflix' }
})

// 接收 - history.js
// import { createBrowserHistory } from 'history';
// const history = createBrowserHistory();
// Get the current location.
const location = history.location;
const { name } = location.state

// 接收 - this.props.history
const { name } = this.props.location.state