react 路由配置

资源

各种进阶资源 + 联系方式请看下方链接
资源

react router 4.0 要安装 react-router-dom 是基于pc端的路由插件
详细教程请看官网 reacttraining.cn打不开的话直接百度进入链接 以下谨记载自己所学
4.0版本中已经不需要路由配置文件 一切皆为组件 可以放在任意组件中配置 当然如果配置在文件中本人感觉还是比较清晰的 仅代表个人观点

react-router 和 react-router-dom的理解

• react-router：提供了一些router的核心api 包括Router,Route，Switch等
• react-router-dom;提供了BrowserRouter, HashRouter, Route,link, Navlink

react-router-dom的核心用法

HashRouter和 BrowserRouter的区别

HashRouter 例：http:localhost:3000/#/admin/buttons 有#号
BrowserRouter 例：http:localhost:3000/admin/buttons 无#号 需要nginx上做一些配置

Route的用法 例

• <Route path=‘/admin’ render={()=>{
  
  //这是4.0的写法
  }}/>

Link的用法 例

import  { Link } from 'react-router-dom'
<li><Link to = '/about'></li> //基础用法 跳转到about组件
<Link to = {{  pathname:'/three/7'  }}>Three #7</Link>

• 定义 在页面中取值时用this.props.match.params.自定义变量名获取 这里是number

404 页面的匹配

• 定义一个 里面不需要写path 只需要写components就行了 自定义一个提示页面 进行匹配不到路由时的友好提示

Switch

这里的switch 非常像js里面的switch case 语法 意思就是加载到目标就中止 react支持加载多个路由 如果外面不套一个 switch 加载 admin/ui/buttons 的话 会加载所有的相似路由 但是套上switch 标签就不同了 也可以在加入exact精准匹配 ###### Redirect - 路由重定向 ###### 例1 在组件中写路由

import React from 'react'
import {HashRouter , Route , Link, Switch} from 'react-router-dom'
import Main from './Main' 内容组件
import About from './about' 内容组件
import Topic from './topic' 内容组件
export default class Home extends React.Component{

    render(){
        return (
            <HashRouter>
                <div>
                    <ul>
                        <li>
                            <Link to="/">Home</Link>
                        </li>
                        <li>
                            <Link to="/about">About</Link>
                        </li>
                        <li>
                            <Link to="/topics">Topics</Link>
                        </li>
                    </ul>
                    <hr/>
                    <Switch>
                        <Route exact={true} path="/" component={Main}></Route>
                        <Route path="/about" component={About}></Route>
                        <Route path="/topics" component={Topic}></Route>
                    </Switch>
                </div>
            </HashRouter>
        );
    }
}
最后把这个组件挂在到index.js上成为根组件

配置嵌套路由 如下代码

import React from 'react'
import { HashRouter, Route, Switch, Redirect} from 'react-router-dom'
import App from './App'
import Login from './pages/login'
import Admin from './admin'
import Home from './pages/home';
import Buttons from './pages/ui/buttons'

export default class ERouter extends React.Component{

    render(){
        return (
            <HashRouter>
                <App> //最外层组件
                    <Switch> 里面包括三个一级路由
                        <Route path="/login" component={Login}/>
                        <Route path="/common" render={() =>
                            <Common>
                                <Route path="/common/order/detail/:orderId" component={OrderDetail} />
                            </Common>
                        }
                        />
                        <Route path="/" render={()=>
                            <Admin> 主页面 包括页面内所有的嵌套路由 里面有左侧的树状菜单 右侧是根据点击左侧菜单跳转的页面  在Admin页面中右侧 里面写上this.props.children就行了 此处首先渲染home组件
                                <Switch>
                                    <Route path='/home' component={Home} />
                                    <Route path="/ui/buttons" component={Buttons} />
                                    <Route path="/permission" component={Permission} />
                                    <Redirect to="/home" />
                                    {/* <Route component={NoMatch} /> */}
                                </Switch>
                            </Admin>         
                        } />
                    </Switch>
                </App>
            </HashRouter>
        );
    }
}