React 基础 day03 路由介绍和基本使用

使用路由模块

• 下载路由模块 npm install react-router-dom -S

• 导入路由模块 import {HashRouter, Route, Link} from 'react-router-dom'

  HashRouter : 表示一个路由的根容器, 将来所有的路由相关的东西, 都要包裹在 HashRouter 里面 , 而且一个网站 , 只需要使用一次 HashRouter 就好了

  Route : 表示一个路由规则 , 在 Route 身上, 有两个比较重要的属性 , path component

  Link : 表示一个路由的链接

• 启用路由, 实现跳转 demo

  import React from 'react'
  import {HashRouter, Route, Link} from 'react-router-dom'
  
  import Home from './components/Home.jsx'
  import Movie from './components/Movie.jsx'
  import About from './components/About.jsx'
  
  class App extends React.Component {
    render () {
      // 当使用 HashRouter 将根组件包裹起来的时候 网站就已经启用路由了
      return <HashRouter>
        <div>
          <h1>这是网站的app根组件</h1>
          <Link to="/home">首页</Link> &nbsp;&nbsp;&nbsp;
          <Link to="/movie">电影</Link>&nbsp;&nbsp;&nbsp;
          <Link to="/about">关于</Link>
          <hr/>
          {/* Route 具有两种身份 1. 它是路由匹配规则 2. 它是一个占位符, 表示将来匹配到的路由放到这个位置 */}
          <Route path="/home" component={Home}></Route>
          <Route path="/movie" component={Movie}></Route>
          <Route path="/about" component={About}></Route>
        </div>
      </HashRouter>
    }
  }