react中的路由----基本使用

1. 安装：yarn add react-router-dom / npm i react-router-dom

2. 导入路由的三个核心组件：Router / Route / Link 这三个都是组件

   import { BrowserRouter as Router, Route, Link } from ‘react-router-dom’

3. 使用 Router 组件包裹整个应用（重要）

    <Router>
    <div className="App">
    // … 省略页面内容
    </div>
    </Router>
   

4. 使用 Link 组件作为导航菜单（路由入口）

   <Link to="/first">页面一</Link>
   

5. 使用 Route 组件配置路由规则和要展示的组件（路由出口），对应的路由规则，匹配的组件

      		const First = () => <p>页面一的页面内容</p>
      		<Router>
      		<div className="App">
      		<Link to="/first">页面一</Link>
      		<Route path="/first" component={First}></Route>
      		</div>
      		</Router>
   

import React from "react";
import ReactDOM from "react-dom";
// react路由

// 1、导入
import {
    
     BrowserRouter as Router, Route , Link } from "react-router-dom"

const First = () => <p>页面一的页面内容</p>
const App = () => (
 
  // 2、包裹
  <Router>
      <div>
        <h1>React路由基础</h1>
        {
    
    /* 3、指定路由入口*/}
        <Link to="/first">页面1</Link>
        {
    
    /* 4、  路由规则(与入口对应)          匹配的组件     路由出口*/}
        <Route path="/first" component={
    
    First}></Route>
      </div>
  </Router>
)
ReactDOM.render(<App />, document.getElementById("root"));