React-router

React-router 的基本使用 

• Link 和NavLink 都是以a 标签的形式呈现
• 默认是模糊匹配, exact 属性表示精准匹配
• HashRouter         Hash 模式
• BrowserRouter    History 模式

1. Link 

import { HashRouter, BrowserRouter, Switch, NavLink, Link, Route, Redirect } from 'react-router-dom';

import Home from './pages/home';
import About from './pages/about';
import Profile from './pages/profile';
import User from './pages/user';
import NoMatchfrom './pages/noMatch';

<div>
    <BrowserRouter>    
        <Link to="/">首页</Link>
        <Link to="/about">关于</Link>
        <Link to="/profile">我的</Link>

        <Route exact path="/" component={Home}/>
        <Route path="/about" component={About}/>
        <Route path="/profile" component={Profile}/>
    </BrowserRouter>
</div>

 2. NavLink

用于添加样式

// NavLink 的使用   
// 被点击的NavLink 默认具有 active 类名
<NavLink exact to="/" activeStyle={{ color: "red" }}>首页</NavLink>
<NavLink to="/about" activeStyle={{ color: "red" }}>关于</NavLink>
<NavLink to="/profile" activeStyle={{ color: "red" }}>我的</NavLink>

// activeClassName 属性可以修改NavLink 的默认类名
<NavLink exact to="/" activeClassName="link-active">首页</NavLink>
<NavLink to="/about" activeClassName="link-active">关于</NavLink>
<NavLink to="/profile" activeClassName="link-active">我的</NavLink>

<Route exact path="/" component={Home}/>
<Route path="/about" component={About}/>
<Route path="/profile" component={Profile}/>

3. Switch 

Switch 表示从上往下对Roue 进行匹配， 如果匹配到就不再向下匹配 

    <NavLink exact to="/" activeClassName="link-active">首页</NavLink>
    <NavLink to="/about" activeClassName="link-active">关于</NavLink>
    <NavLink to="/profile" activeClassName="link-active">我的</NavLink>
    <NavLink to="/user" activeClassName="link-active">用户</NavLink>  

<Switch>
    <Route exact path="/" component={ Home }/>
    <Route path="/about" component={ About }/>
    <Route path="/profile" component={ Profile }/>
    // 动态路由
    <Route path="/:id" component={ User }/>
    // 默认路由 在都没匹配的情况下匹配默认路由
    <Route component={ NoMatch }/>
</Switch>

4. Redirect

<Route path="/login" component={ Login }/>


export default class user extends PureComponent {
    constructor(props) {
        super(props);
    
        this.state = {
            isLogin: true;
        }
    }    
    
    render() {
        return this.state.isLogin ? (
            <div>
                <h2>User</h2>
            </div>
         ) : <Redirect to="/login">
    }
}

5. 路由嵌套

export default class About from PureComponent {
    render() {
        return (
            <div>
                <NavLink exact to="/about">企业历史</NavLink>
                <NavLink exact to="/about/culture">企业文化</NavLink>
                <NavLink exact to="/about/contact">关于我们</NavLink>

                <Switch>
                    <Route exact path="/about" component={AboutHistory}/>
                    <Route exact path="/about/culture" component={AboutCulture}/>
                    <Route exact path="/about/contact" component={AboutContact}/>
                </Switch>
            </div>
        )
    }
}

6. 手动路由跳转

// 当前About 组件是通过路由进行创建并进行渲染的组件
export default class About from PureComponent {
    render() {
        return (
            <div>
                <NavLink exact to="/about">企业历史</NavLink>
                <NavLink exact to="/about/culture">企业文化</NavLink>
                <NavLink exact to="/about/contact">关于我们</NavLink>
                <button onClick={ e => this.jumpTo() }>手动路由跳转</button>

                <Switch>
                    <Route exact path="/about" component={AboutHistory}/>
                    <Route exact path="/about/culture" component={AboutCulture}/>
                    <Route exact path="/about/contact" component={AboutContact}/>
                    <Route path="/about/jumpTo" component={ JumpTo }/>
                </Switch>
            </div>
        )
    }
    
    jumpTo() {
        // 由路由创建并渲染的组件具有这些属性
        // this.props.history
        // this.props.location
        // this.props.match
        this.props.history.push("/about/jumpTo");
    }
}

• 通过非Route 方式渲染出来的组件，想要使用history、location、march 这些属性需要通过withRouter() 这个高阶组件

import { widthRouter } from 'react-router-dom'

export default withRouter(About)

<BrowserRouter>
    <About/>
</BrowserRouter>

 7. 动态路由

export default class Detail from PureComponent {
    render() {
        const match = this.props.match;
        return (
            <div>
               <h2>Detail: { match.params.id } </h2>
            </div>
        )
    }
}

export default class About from PureComponent {

    render() {
        const id = "abc";
        return (
            <div>
                <NavLink exact to={`/detail/${id}`}>详情</NavLink>

                <Switch>
                    <Route exact path="/detail/:id" component={AboutHistory}/>
                </Switch>
            </div>
        )
    }
}