react-router-4初级学习

简介

react-router由React Training(官网)和许多令人惊叹的贡献者（github）开发和维护。

参考文档

React Router v4 版本 完全指北

安装环境

• 创建如果您需要创建一个，最简单的入门方法是使用名为Create React App的流行工具。
• Web应用程序中使用的所有组件react-router-dom
  npm install --save-dev react-router-dom

基础属性

1.路由器

对于Web项目，react-router-dom提供<BrowserRouter>和<HashRouter>路由器。一般来说，<BrowserRouter>响应请求的服务器路由，<HashRouter>静态文件服务器路由。

import { BrowserRouter } from "react-router-dom";
ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  DOM
);

2.路由匹配

有两个路由匹配组件：<Route>和<Switch>。<Switch>将迭代其所有子<Route>元素，并仅渲染与当前位置匹配的第一个子元素。

import React, { Component } from 'react';
import Hello from './Content/Hello'
import State from './Content/State'
import Event from './Content/Event'
import NoMatch from './Content/NoMatch'
import { Route, Switch } from "react-router-dom";
class Content extends Component {
    constructor() {
        super()
    }
    render() {
        return <Switch>
            <Route exact path="/" component={Hello} />
            <Route path="/State" component={State} />
            <Route path="/Event" component={Event} />
            <Route component={NoMatch} />
            <Event />
        </Switch>
    }
}
export default Content;

2.<router>渲染组件属性

<router>有三个属性选择渲染组件，分别是component、render、children

const Home = () => <div>Home</div>;
const App = () => {
  const someVariable = true;

  return (
    <Switch>
      {/* these are good */}
      <Route exact path="/" component={Home} />
      <Route
        path="/about"
        render={props => <About {...props} extra={someVariable} />}
      />
      {/* do not do this */}
      <Route
        path="/contact"
        component={props => <Contact {...props} extra={someVariable} />}
      />
    </Switch>
  );
};

3.导航

React Router提供了一个<Link>组件来在您的应用程序中创建链接。<NavLink>是一种特殊类型。任何时候你想强制导航，你可以渲染一个<Redirect>。

<Link to="/">Home</Link>
//<a href='/'>Home</a> 
<NavLink to="/react" activeClassName="hurray">
  React
</NavLink>
// <a href='/react' className='hurray'>React</a>
<Redirect to="/login" />

API

<withRouter>

访问history对象的属性和最近<Route>的match经withRouter高阶组件。
tip:它就是个高阶组件，组要在props上加载history对象。

import React, { Component } from 'react';
import {withRouter} from 'react-router-dom'
class Footer extends Component {
    constructor() {
        super()
        this.goBack = this.goBack.bind(this)
    }
    goBack(){
        console.log("goback",this.props)
        this.props.history.go(-1)
    }
    render() {
        return (
            <div>
                <button onClick={this.goBack}>返回</button>
                {this.props.children}
            </div>
        )
    }
}
export default withRouter(Footer)