学习react 的第八天（路由重要的知识点）

路由的创建安装和使用（请务必看完）

(此代码包含的知识点安装导入路由路由的使用和编程式导航)

import react,{Component} from 'react'
import reactDom from 'react-dom'

// react路由的应用
// 使用yarn add react-router-dom 下载路由
// ...导入
// import {BrowserRouter as Router,Route,Link}  from 'react-router-dom'
//  Route 其实就是 router-view
// Link就是router-link
import {BrowserRouter as Router,Route,Link} from 'react-router-dom'
// 这几个名字是不能随意更改的（我试过）


// 还有一种方式 HashRouter（代码不需要变动）和上面的一样不过在地址栏里面会多一个井号
class ComponentRouter extends Component{
  render(){
    // 路由
    return (
    <Router>
      {/* 不过是在路由上面包裹了一层Router */}
      {/* route有两个参数一个是component一个是path和vue一样 */}
      {/* Link 也是和vue一样  to属性 */}
      <div>
       <Route path="/a" component={RouterA}></Route>
       <Route path="/b" component={RouterB}></Route>
      </div>
    </Router>
    )
  }
}
const RouterA=()=>{
  return (<span>这是路由A</span>)
}
const RouterB=(props)=>{
  // 如果想要使用编程式导航则自身必须被设置成路由才能从props获取到history（可能说的不对但是是我自己理解的意思）
  const toa=()=>{
    // history不仅仅有push 还有go...可以打印看看和看文档
    props.history.push("/a")
  }
  return (<span onClick={toa}>这是路由B </span>)
}

export  default ComponentRouter

// 这里省略了...渲染到页面上 ReactDom.render(...,...)

路由的匹配模式模糊匹配和准确匹配

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

// 模糊匹配模式 是路由默认的匹配模式
// 只要path="/a" 包含就会匹配成功

class DefualtRouter extends Component{
  render(){
    return (
      <Router>
        {/* 默认路由 （他有一个缺点react中的路由path匹配是模糊匹配 ）结果就是不管匹配什么带/都会匹配到默认路由home */}
        <Route path='/' component={Home}></Route>
        {/* 模糊匹配 地址栏中 只要包含/b那么就会匹配到  B的组件 */}
        <Route path='/b' component={B}></Route>
        {/* 精确路由匹配 地址栏只有完全准确的时候才会匹配到此路由 给路由添加（exact）关键字就行*/}
        <Route exact path="/c" component={c}></Route>
      </Router>
    )
  }
}
const Home=()=>{
  return (<span>Home</span>)
}
const B=()=>{
  return (<span>这是B</span>)
}
const c=()=>{
  return (<span>这是C</span>)
}
export default DefualtRouter