react路由笔记

一、路由介绍

二、路由的基本使用
2.1使用步骤
1.安装：npm i react-router-dom -S / yarn add react-router-dom
2.导入路由的三个核心组件：Router / Route / Link
import { BrowserRouter as Router, Router, Link} from ‘react-router-dom’
3.使用Router组件包裹整个应用（重要）


二、路由的基本使用

import React from 'react'
// 导入路由组件
import {BrowserRouter as Router, Route, Link} from 'react-router-dom'
// import {HashRouter as Router, Route, Link} from 'react-router-dom'

// 创建函数组件first
const First = () => <p>这是组件1的值</p>
export default class RouterCompone extends React.Component {
  render() {
    return (
      <Router>
        <div>
          <h1>React路由基础</h1>
          {/* 指定路由入口 */}
          <Link to="/first">页面1</Link>
          {/* 指定路由出口 path要与上面Link的to保持一致 */}
          // Route组件写在哪，渲染出来的组件就展示在哪
          <Route path="/first" component={First}></Route>
        </div>
      </Router>
    )
  }
}

// 2.2常用组件说明
//  1.Router组件：包裹整个应用，一个React应用只需要使用一次
    //  两种常用Router: HashRouter和BrowsrRouter(不推荐使用HashRouter)
    //  HashRouter：使用URL的哈希值实现(local:300/#/first)
    // （推荐）BrowsrRouter：使用H5的history API实现(local:300/first)
// 2.Link组件：用于指定导航链接(a标签)
    //  to属性：浏览器地址栏中的pathname(localtion.pathname可以拿到to的属性值)
    //  <Link to="/first"></Link>
// 3.Route组件：指定路由展示组件相关信息：
    // path属性：路由规则
    // component属性：展示的组件
    // Route组件写在哪，渲染出来的组件就展示在哪
    // <Route path="/first" component={组件名称}></Route>