React路由

路由模式(2种)

hash

改变地址 -> push     ->  window.location.hash=
         -> replace  -> window.location.replace(url)
hashchange

browser/history

改变地址 -> pushstate  -> window.history.pushState({}, `这是标题`, this.getAttribute('href'));
        ->  replacestate  -> window.history.replaceState({}, `这是标题`, this.getAttribute('href'));
popState

1、react-router-dom

web前段用的

Switch
// 只显示匹配的第一个子路由，然后就不往下匹配了


// 当route不给path属性是会匹配路由
<Route component={()=><h1>未匹配路由</h1>}/>

// redirect不给from属性是也会匹配任意匹配
<Redirect exact to='/index'></Redirect>

引入
import {
    HashRouter as Router,   // 使用哈希版本
    Link,   // 相当于vue的router-link
    Redirect,  // 改变重定向
    Route   // 相当于vue的router-view
} from 'react-router-dom';

render(){
        return 
            <Router>
                <Fragment>
                    <Switch>
                            // 占位标签，如果path与当前路径匹配，渲染component
                            // exact表示精准匹配，当path与当前路径一模一样才匹配
                        <Route exact path="/index" component={()=><h1>我是首页</h1>}/>
                        <Route path="/taobao" component={()=><h1>我是淘宝</h1>}/>
                    </Switch>
                    <footer>
                        // 导航标签 to属性声明要跳转的路径
                        <Link to="/index">首页</Link>
                        <Link to="/taobao">淘宝</Link>
                        <Redirect exact from="/" to="/index"></Redirect>
                    </footer>
                </Fragment>
            </Router>
    }

2、react-router-native

native用的

3、HashRouter

哈希模式(#) 只存在浏览器端，服务器会忽略

瞄点：不会刷新浏览器，跳转页面

4、BrowserRouter

浏览器模式(localhost:3000/tab) // 假的url，伪地址

5、后退

• window.history.go(-1)
• window.history.back()

<button onClick={()=>{
    window.history.back()
}}>
    后退
</button>

6、路由的封装(一级路由)
index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {HashRouter as Router} from 'react-router-dom';

// 封装的类似于router-view的文件
import RouterView from './react/reactView';
// 路由配置
import config from './react/react.config';

ReactDOM.render(<Router>
    <RouterView routes={config.routes}></RouterView>
</Router>,document.getElementById('root'));

react/reactView.jsx

import React from 'react';
import {Switch,Route,Redirect} from 'react-router-dom';

export default (props)=>{
    return <Switch>{
        props.routes.map((item,index)=>{
            return <Route key={index} path={item.path} render={(props)=>{
                if(item.children){
                    // 渲染组件
                    // ...props 展开路由信息传递下去
                    // item.children 把子路由配置传递下去
                    return <item.component {...props} routes={item.children}/>
                }else{
                    return <item.component {...props}/>
                }
            }}></Route>
        })
    }
    <Redirect exact from='/' to='/tab'></Redirect>
    </Switch>
}

react/react.config.js

// 一级路由
import Tab from '../components/Tab.jsx';
import Detail from '../components/Detail.jsx';

// 二级路由
import Hot from '../components/include/Hot.jsx';
import Movie from '../components/include/Movie.jsx';
import My from '../components/include/My.jsx';

export default{
    routes:[
        {
            path:'/tab',
            component:Tab,
            children:[
                {
                    path:'/tab/hot',
                    component:Hot
                }, {
                    path:'/tab/movie',
                    component:Movie
                }, {
                    path:'/tab/my',
                    component:My
                }
            ]
        },{
            path:'/detail',
            component:Detail
        }
    ]
}

components/Tab.js

import React,{Component} from 'react';
import {NavLink} from 'react-router-dom';

class Detail extends Component{
    constructor(props){
        super(props)
    }

    render(){
        return <div>
            <footer>
                <NavLink to="/tab/hot">热映</NavLink>
                <NavLink to="/tab/movie">电影</NavLink>
                <NavLink to="/tab/my">我的</NavLink>
            </footer>
        </div>
    }
}

export default Detail;