React.js学习笔记(3) - router4路由笔记(1)

(1) 安装

• React Router被拆分成三个包：react-router,react-router-dom和react-router-native。react-router提供核心的路由组件与函数。其余两个则提供运行环境（即浏览器与react-native）所需的特定组件。
• 进行网站（将会运行在浏览器环境中）构建，我们应当安装react-router-dom。react-router-dom暴露出react-router中暴露的对象与方法，因此你只需要安装并引用react-router-dom即可。

cnpm install react-router-dom --save

(2) 引入

import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom'

(3)使用

• 知识点：
• (1) 当路由地址匹配成功后，会创建一个含有以下属性的match对象：
  url ：与当前location路径名所匹配部分
  path ：路由的地址
  isExact ：path 是否等于 pathname
  params ：从path-to-regexp获取的路径中取出的值都被包含在这个对象中

-(2) exact严格模式，表示只匹配当前的路径。

 ( 
请点击内容查看详情
  ) }>

（上）加了exact

（下）没加exact

完整代码：

import React from 'react'
import {
    BrowserRouter as Router,
    Route,
    Link
} from 'react-router-dom'


const App = () => (
    
        

            

                {/*Link的url需要匹配到Route的path,才会渲染对应的组件*/}
                
 ui站酷 
                
 前端 
                
 省局到 
            

            


            
            
            
        
    
)

const Ui = () => (
    

        

            这里是ui路由的内容
        
    
)

const Code = () => (
    

        

            这里是前段路由的内容
        
    
)

const Dao = ({match}) => {
    console.log(match)
    return(
        

            
这里是胜局到的内容
            

                
 省局到内容1 
                
 省局到内容2 
                
 省局到内容3 
                
 省局到内容4 
            
            


            {/* (
11111111111
)}>*/}
            {/* (
2222222222
)}>*/}
            {/* (
333333333
)}>*/}
            
            {/*这里的:aa表示的是传参，传入aa这个参数变量，获取所有/dao/后面的路径*/}
             ( 
请点击内容查看详情
  ) }>
        
    )
}
// 下面的match是子路由匹配成功的时候的match,与上面的（父）路由匹配成功的match不一样
const Match = ({match}) => {
    console.log(match)
    return(
        

            
{match.params.aa}
        
    )
}


export default App

QQ截图20170826024224.png

(官网)https://reacttraining.com/react-router/web/example/basic
http://blog.csdn.net/github_38095237/article/details/70157021?winzoom=1
(嵌套路由)http://www.menvscode.com/detail/5957cdc941d2a6025bbe0446
(简单入门)https://segmentfault.com/a/1190000010174260