React Router V4

https://www.techiediaries.com/react-router-dom-v4/

1. React Router v3和React Router v4的区别

(1)React Router v4的路由不再是集中式的，而是分散在其他的UI或layout中。
(2)React Router v4的引入使用 import {XXX,XXX} from 'react-router-dom'，而React Router v3使用import {XXX,XXX} from 'react-router'引入。
(3)React Router v4新路由组件：BrowserRouter和HashRouter
(4)React Router v4嵌套组件不支持{props.children}
(5)React Router v4支持同时匹配多个路由时，render同一个组件。

2. React Router v4分为三个包：

(1)react-router:dom and native的核心组件
(2)react-router-dom：专为browsers or web apps
(3)react-router-native：移动端开发专用

3. 安装命令：npm install --save react-router-dom
4. BrowserRouter vs HashRouter
   有很多路由组件，其中最主要的两个是BrowserRouter、HashRouter。
   如果url动态改变，server动态响应显示不同内容，则使用BrowserRouter。
   如果使用服务器只为了获取服务器静态文件，则使用HashRouter。
5. Route
   React Router v4最有用的组件。
   Route组件的属性：

path：string
component:当path匹配时，render的组件
exact:严格模式
strict:仅匹配有结尾/的路径
render:返回React元素的function。
children:返回React元素的function，即便没有匹配到任何path也render

<Route path="/home" render={() => <div>Home</div>}/>--》inline render

需要传参数查看详细信息时，使用path="/:param1"形式定义。
输入或者请求的location和path匹配时，下面的属性值会被传给render的component。

url/path/isExact(path严格和当前location的path-name相同时，返回true)/params(包含url参数的object)

下面的代码，主要关注：

//path定义
<Route path="/list/:id" component={Documentation}></Route>
//component接收：
const Documentation = ({match})=>(
    <div>
        <h1> documentation: {match.params.id}</h1>
    </div>
);

6. Link和NavLink
   navigation时使用Link。Link部分加载，而非页面整体加载。
7. 代码编写
   src\routes\App.js

import React, {Component} from 'react';
import {BrowserRouter as Router, Route, Link} from 'react-router-dom';
import HomePage from "./routes/HomePage";
import AboutPage from "./routes/AboutPage";

const BaseLayout = () =>(
        <div className="base">
            <header>
                <p>React Router v4 Browser Example</p>
                <nav>
                    <ul>
                        <li><Link to='/'>Home</Link></li>
                        <li><Link to='/about'>About</Link></li>
                        <li><Link to='/me'>Profile</Link></li>
                        <li><Link to='/login'>Login</Link></li>
                        <li><Link to='/register'>Register</Link></li>
                        <li><Link to='/contact'>Contact</Link></li>
                    </ul>
                </nav>
            </header>
            <div className="container">
                <Route path="/" exact component={HomePage} />
                <Route path="/about" component={AboutPage} />
            </div>
            <footer>
                React Router v4 Browser Example (c) 2017
            </footer>
        </div>
);
class App extends Component {
    render() {
        return (
            <Router>
                <BaseLayout></BaseLayout>
            </Router>
        );
    }
}

export default App;

src\routes\HomePage.js

import React, { Component } from 'react';

const HomePage = () => <div>This is a Home Page</div>;
export default HomePage;

如果没有exact，访问/login, /和/login对应的component都会被显示。

8. inclusive routing和Exclusive Routing
   inclusive routing
   匹配到的全部被render。访问地址中包括/me时，HomePage和AboutPage
   组件信息都被render。

import React, {Component} from 'react';
import {BrowserRouter as Router, Route, Link} from 'react-router-dom';
import HomePage from "./routes/HomePage";
import AboutPage from "./routes/AboutPage";

const BaseLayout = () =>(
        <div className="base">
            <header>
                <p>React Router v4 Browser Example</p>
                <nav>
                    <ul>
                        <li><Link to='/'>Home</Link></li>
                        <li><Link to='/about'>About</Link></li>
                        <li><Link to='/me'>Profile</Link><Route path="/me" component={HomePage} /><Route path="/me" component={AboutPage} /></li>
                        <li><Link to='/login'>Login</Link></li>
                        <li><Link to='/register'>Register</Link></li>
                        <li><Link to='/contact'>Contact</Link></li>
                    </ul>
                </nav>
            </header>
            <div className="container">
                <Route path="/" exact component={HomePage} />
                <Route path="/about" component={AboutPage} />
            </div>
            <footer>
                React Router v4 Browser Example (c) 2017
            </footer>
        </div>
);
class App extends Component {
    render() {
        return (
            <Router>
                <BaseLayout></BaseLayout>
            </Router>
        );
    }
}

export default App;

Exclusive Routing
只有第一个match被render。React Router 4使用Switch来实现。match时，只有Switch中第一个Route或者Redirect的React元素被render。