React - 路由的基本使用

import React, { Component } from 'react'
import ReactDOM from 'react-dom/client'
import { nanoid } from 'nanoid'
import {
  // 🤴🏻🟨 推荐使用as将路由重命名为Router
  HashRouter,
  BrowserRouter as Router,
  Route,
  Link,
  NavLink,
  Switch,
  Redirect,
} from 'react-router-dom'

const root = ReactDOM.createRoot(document.getElementById('root'))

// 🍅 Link组件的使用说明
// Link和NavLink的区别
// NavLink如何自定义高亮类名
// 精准匹配:url路径和to属性的值,一摸一样
// 模糊匹配:url路径和to属性的值,是包含关系 💥url路径包含to属性

class MyApp01 extends React.Component {
  // 🥩NavLink自带高亮类名active
  // 🥩activeClassName自定义激活时的类名
  // 🥩exact 开启精准匹配: exact={true} => 省略值
  render() {
    return (
      <>
        <Router>
          <div>
            <h1>App组件</h1>
            <NavLink activeClassName="xxx" to="/home">
              跳转到Home
            </NavLink>
            <NavLink exact to="/my">
              跳转到音乐
            </NavLink>
            <NavLink to="/friend">跳转到朋友</NavLink>

            <div className="box">
              <Route path="/home" component={HomeCom} />
            </div>
            <Route path="/my" component={MusicCom} />
            <Route path="/friend" component={FriendCom} />
          </div>
        </Router>
      </>
    )
  }
}

// Route组件的使用说明
class MyApp02 extends React.Component {
  render() {
    // 🍄 Route时规则对象和挂载点二合一,匹配的时候,渲染组件,不匹配的时候原地返回一个null
    // 🍄 Route默认是模糊匹配,exact开启精确匹配,类似Link组件
    // 🍄 React组件默认自上向下,一次匹配,默认不会停止
    return (
      <>
        <Router>
          <div>
            <h1>App组件</h1>
            <NavLink activeClassName="xxx" to="/home">
              跳转到Home
            </NavLink>
            <NavLink activeClassName="xxx" to="/friend">
              跳转到Friend
            </NavLink>
            <Route path="/home" component={HomeCom} />
            <Route path="/home" component={HomeCom} />
            <Route path="/home" component={HomeCom} />
            <Route path="/home" component={HomeCom} />
            <Route path="/home" component={HomeCom} />
            <Route path="/my" component={MusicCom} />
            {/* // 🍚 表示匹配任意路径的两种方式
            // 1. 不写path,等价于Vue中的*
            // 2. path="/",可以和任意路径进行模糊匹配 */}
            <Route exact path="/" component={FriendCom} />
            <Route
              // 不写path时, exact无效
              component={MusicCom}
            />
          </div>
        </Router>
      </>
    )
  }
}

// Switch \ 404 \ 重定向
class MyApp03 extends React.Component {
  render() {
    return (
      <Router>
        <div>
          <h1>App组件</h1>
          <NavLink activeClassName="xxx" to="/home">
            跳转到Home
          </NavLink>
          <br />
          <NavLink exact to="/my">
            跳转到我的音乐
          </NavLink>
          <br />
          <NavLink to="/friend">跳转到朋友</NavLink>
          {/* 一般Route都包含在Switch之内 */}
          <Switch>
            <Redirect from="/" to="/home" exact />
            <Route path="/home" component={HomeCom} />
            <Route path="/my" component={MusicCom} />
            <Route path="/friend" component={MyFriendCom} />
            {/* 404 不写path,一般放在Swtich最后一个 */}
            <Route component={NotFoundCom} />
          </Switch>
        </div>
      </Router>
    )
  }
}

// 桥套路由

function NotFoundCom(params) {
  return <h1>404页面</h1>
}
function HomeCom() {
  return (
    <>
      <h1>我是首页组件</h1>
    </>
  )
}

function MusicCom() {
  return (
    <>
      <h1>我是音乐组件</h1>
    </>
  )
}

function FriendCom() {
  return (
    <>
      <h1>我是朋友组件</h1>
    </>
  )
}

function MyFriendCom() {
  return (
    <>
      <h1>我是朋友组件</h1>
      <Link to="/friend">朋友01</Link>
      <br />
      <Link to="/friend/friend2">朋友02</Link>
      <br />
      <Link to="/friend/friend3">朋友03</Link>
      {/* 在父组件内,再次使用Switch包裹Route,设置二级路由的匹配规则和挂在带你
        🍧 1. 二级路由, path的值, 从"/父级/子路由路径"
        🍧 2. 父级路由Route不能使用exact
        🍧 3. 父级path可以同名,互不影响
        🍧 4. to属性跳转二级路由,to的值需要从"一级路径/二级路径"
      */}
      <Switch>
        <Route path="/friend/friend2" component={FriendCom02}></Route>
        <Route path="/friend/friend3" component={FriendCom03}></Route>
        <Route path="/friend" component={FriendCom01}></Route>
      </Switch>
    </>
  )
}

function FriendCom01() {
  return <h1>我是朋友01组件</h1>
}

function FriendCom02() {
  return <h1>我是朋友02组件</h1>
}

function FriendCom03() {
  return <h1>我是朋友03组件</h1>
}

class MyApp04 extends React.PureComponent {
  render() {
    return (
      <Router>
        <div>
          <h1>App组件</h1>
          <NavLink activeClassName="xxx" to="/home">
            跳转到Home
          </NavLink>
          <br />
          <NavLink exact to="/my">
            跳转到音乐
          </NavLink>
          <br />
          <NavLink to="/friend">跳转到朋友</NavLink>
          <br />
          <Switch>
            <Redirect from="/" to="/home" exact />
            <Route path="/home" component={MyHomeCom} />
            {/* 设置path为动态路由,path="/路径/:自定义属性名" */}
            <Route path="/my/:xxx" component={MyMusicCom} />
          </Switch>
        </div>
      </Router>
    )
  }
}

function MyHomeCom({ history }) {
  return (
    <>
      <h1>我是首页组件</h1>
      <button
        onClick={() => {
          history.goBack() // 等价于 go(-1); 回退异步
        }}
      >
        点我跳转到音乐
      </button>
    </>
  )
}

function MyMusicCom({ match }) {
  // 通过props.match.params自定义属性名接收数据
  return (
    <>
      <h1>我是音乐组件 - {match.params.xxx}</h1>
    </>
  )
}
const divNode = (
  <div>
    <MyApp04 />
  </div>
)

root.render(divNode)