第1.4章：react-router路由

使用React构建的单页面应用，要想实现页面间的跳转，就要使用路由

react-router4完成跳转小案例

安装

yarn add react-router-dom

基本操作

然后我们新建3个页面，书院首页、课程特色、活动资讯，分别命名为"home"、"info"和"course"。

新建3个页面

info/index.js在页面中编写如下代码：（余下俩个页面类似）

import React, { Component } from 'react'
import './style.css'

export class Info extends Component {
    render() {
        return (
            

                活动咨询~内容
            
        )
    }
}

export default Info

页面创建完成

---

创建一个路由组件，并编写如下代码：

import React, { Component, Fragment } from 'react'
import Header from './components/header'
// 路由 start => 引用 react-router4 路由
import { BrowserRouter, Route } from 'react-router-dom'
import Home from './pages/home'
import Info from './pages/info'
import Course from './pages/course'
// 路由 end 引入3个页面

export class App extends Component {

  render() {
    return (
        
          
{/* 公共导航栏 */}
          
            
              
              
              
              {/* 
                多行注释 
                地址栏输入"localhost:3000/info"、调用组件Info => ./pages/info
              */}
            
          
        
    )
  }
}

export default App

通过标签跳转

    书院首页
    课程特色
    活动资讯