react中react-router的入门级教程

学习react的同学,可以肯定百分之90度都接触过vue-router
所以冠以SPA 单页应用 和 路由的相关知识我就不再一一赘述了
还是直接上代码和步骤了
1.先安装 可不是 react-router

npm i react-router-dom -S

2.引入

import {
      BrowserRouter as Router,Route,Link } from "react-router-dom"
//这里起别名了　太长了　Router

3.使用
Router 在最外层包括着 // 建议里面 有一个div
Link 用来 路由跳转
Route 指向跳转的组件页面

function App() {
     
  return (
      <Router>
        <div>
          <Link to="/" >首页</Link>
          <Link to="/about" >关于</Link>
          <Link to="/news" >新闻页</Link>
           <Route path="/" component={
     Home} />
           <Route path="/about" component={
     About} />
           <Route path="/news" component={
     News} />
        </div>
      </Router>
  );
}
function News(){
     
  return (
    <div>我是新闻页面</div>
  )
}
function About(){
     
  return (
    <div>我是关于页面</div>
  )
}
function Home(){
     
  return (
    <div>我是首页页面</div>
  )
}
export default App;

不过上面的显示页面是 会有点bug 虽然实现了 路由的跳转 但是发现首页 那个路由页面都有 这个明显不是我们想要的是把
这个问题是由于
/ 和 /news不是精确匹配导致的　　　只要包括了　／都算是匹配到了
这个时候我们添加上精确匹配就可以了

//加上　exact关键字
<Route exact path="/" component={
     Home} />

4.在vue中有 子路由的说法 就在当前的路由下面添加 children就可以了
但是在react中没有这个 但是可以通过其他的方式来实现
// 动态路由

//   /news/:name添加上　冒号关键字
<Route path="/news/:name" component={
     Sport} />

//使用　this.props.match.params.name获取到　页面传过来的数值
class Sport extends React.Component {
     
  render(){
     
    console.log(this.props.match.params.name)
    let a;
    if(this.props.match.params.name==='football'){
     
      a='我是足球'
    }else if(this.props.match.params.name==='basketball'){
     
      a='我是篮球'
    }else{
     
      a='我在跑步'
    }
    return (
      <div>{
     a}</div>
    )
  }
}

同时这个复习下　let的关键字 块级作用域 如果在if语句下 定义的变量是在外面拿不到的注意了哈 童鞋们
生活那么苦,为啥不给自己一颗糖吃呢！坚持下去!你会看到不一样的风景！加油 奥利给！