第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 (
            <div className="info_cont">
                活动咨询~内容
            </div>
        )
    }
}

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 (
        <Fragment>
          <Header />{/* 公共导航栏 */}
          <BrowserRouter>
            <Fragment>
              <Route path="/" exact component={Home}></Route>
              <Route path="/course" exact component={Course}></Route>
              <Route path="/info" exact component={Info}></Route>
              {/* 
                多行注释 
                地址栏输入"localhost:3000/info"、调用组件Info => ./pages/info
              */}
            </Fragment>
          </BrowserRouter>
        </Fragment>
    )
  }
}

export default App

通过<a>标签跳转

<nav>
    <a href="/" className="nav_Item">书院首页</a>
    <a href="/course" className="nav_Item">课程特色</a>
    <a href="/info" className="nav_Item">活动资讯</a>
</nav>