react-router v4 路由管理组件库

react-router V4

• 概念：一个路由管理的组件库，包含多个路由组件
• 几个重要组件
  • Router:管理路由的组件
  • Route:注册路由，两个属性，path为路径，component为指向请求的组件
  • Link：生成a标签，属性to为请求的路由
  • Switch：包裹一组,将迭代其子元素路由，选择一个子路由进行渲染
• index.js

import React from 'react';
import ReactDOM from 'react-dom';
// BrowserRouter处理服务器动态请求使用 HashRouter处理只有静态文件的服务器网站
import {BrowserRouter as Router,Route,Switch} from "react-router-dom";

import About from "./components/About"
import App from "./components/App"
import Repos from "./components/Repos"
import Repo from "./components/Repo"


ReactDOM.render(
    (
         
            

                {/* Route 注册路由，path为路径 component为指向的组件*/}
                
                {/* Switch 包裹多个，对子元素路由进行迭代，仅渲染一个*/}
                
                    
                    {/* 注意这组件嵌套的用法*/}
                     {/* 在这不能注册此组件的路由 否则，子组件内容不能显示 */}
                        {/* :name 为占位符写法，不确定参数值是什么*/}
                        
                    
                
            
        
    ),
    document.getElementById("root")
);

• App.js

import React from "react"
import {Link} from "react-router-dom"


class App extends React.Component{
    render() {
        return(
            

                
App组件...
                

                    

                        {/*Link 生成a标签 属性to指向已经注册的路由*/}
                        about
                    
                    

                        repos
                    
                
                

                {/*显示子路由组件的数据内容*/}
                {this.props.children}
            
        )
    }
}

export default App

• Repo.js

import React from "react"

class Repo extends React.Component{
    render() {
        return(
            

                {/* 获取路由中的参数 props.match.params.占位符名字*/}
                公司：{this.props.match.params.name} 产品：{this.props.match.params.repo}
            
        )
    }
}

export default Repo

• Repos.js

import React from "react"
import {Link} from "react-router-dom";

class Repos extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            repos:[
                {name:"google",repo:"github"},
                {name:"antd",repo:"antd"},
                {name:"facebook",repo:"react" }
            ]
        }
    }
    render() {
        let {repos} = this.state;
        return(
            

                
Repos组件...
                

                    {repos.map((item,index)=>{
                        return 
{item.repo}
                    })}
                
                {/*显示子路由组件的数据内容*/}
                {this.props.children}
            
        )
    }
}

export default Repos