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的用法 例

• {
  
  //这是4.0的写法
  }}/>

Link的用法 例

import  { Link } from 'react-router-dom'
 //基础用法 跳转到about组件
Three #7

• 定义 在页面中取值时用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 (
            
                

                    

                        

                            Home
                        
                        

                            About
                        
                        

                            Topics
                        
                    
                    

                    
                        
                        
                        
                    
                
            
        );
    }
}
最后把这个组件挂在到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 (
            
                 //最外层组件
                     里面包括三个一级路由
                        
                        
                            
                                
                            
                        }
                        />
                        
                             主页面 包括页面内所有的嵌套路由 里面有左侧的树状菜单 右侧是根据点击左侧菜单跳转的页面  在Admin页面中右侧 里面写上this.props.children就行了 此处首先渲染home组件
                                
                                    
                                    
                                    
                                    
                                    {/*  */}
                                
                                     
                        } />
                    
                
            
        );
    }
}