基礎day03ルーティングを反応させ、基本的な使い方を紹介

ルーティングモジュールを使用してください

• ダウンロードルーティングモジュール npm install react-router-dom -S

• インポートルーティングモジュール import {HashRouter, Route, Link} from 'react-router-dom'

  HashRouter：、HashRouterの内部に包まれなければ、ルーティングに関連するすべてのものの未来をルートコンテナのルートを表し、ウェブサイト、唯一うまくHashRouter一度使用する必要があります

  経路：経路の本体に、ルーティングルールを表し、2つの重要な特性があり、 path component

  リンク：ルートのリンクを示し、

• ジャンプのデモを達成するために、ルーティングの有効化

  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>
    }
  }