四、React路由方案

一、学习目标

二、补充资料

三、面试真题

四、React-Router基础使用

1、nrm源管理工具

如果下载依赖的时候，下载速度比较慢，或者下载不下来就可以切换一个源再下载

全局安装依赖

npm i nrm -g

查看nrm自带的源

nrm ls

切换想要使用的源

nrm use taobao

2、路由基本使用

用vite创建一个react项目,进入项目，安装关于router的依赖

npm create vite react-router-basic --template=react-ts

npm i react react-dom react-router-dom

路由其实就是条件渲染，只是条件通过路径（path，params，query）来存储了，

然后通过匹配，得到不同路由对应的组件，渲染即可

demo1

import { useState } from 'react'

// type tab = 'home' | 'about' | 'contact';
// ui库经常这样使用，定义一个数组，然后通过类型断言将数组元素的类型转换为联合类型
const TABS = ['home', 'about', 'contact'] as const;
type Tab = (typeof TABS)[number];

const renderTab = (tab: Tab) => {
  switch (tab) {
    case 'home':
      return 'home page';
    case 'about':
      return 'about page';
    case 'contact':
      return 'contact page';
    default:
      return null;
  }
}
function App() {
  const [tab, setTab] = useState<Tab>(TABS[0]);
  return (
    <>
      <div>
        {TABS.map((item) => (
          <button key={item} onClick={() => setTab(item)}>
            {item}
          </button>
        ))}
        {
          renderTab(tab)
        }
      </div>
    </>
  )
}
export default App

demo2

优化一下上面代码，修改映射关系，实现路由切换路径

注意⚠️

• BrowserRouter需要在顶层组件App中，包裹子组件

1、useNavigate实现跳转

注意⚠️

• useNavigate不能在顶层组件App中使用

App.tsx

import { BrowserRouter } from 'react-router-dom';
import UseNavigate from './components/UseNavigate';
function App() {
  return (
    <>
     <BrowserRouter>
       <UseNavigate />
     </BrowserRouter>
    </>
  )
}

export default App

src/components/UseNavigate.tsx

import { Route, Routes, useNavigate } from 'react-router-dom';

const TABS = ['home', 'about', 'contact'] as const;

function UseNavigate() {
  const navigate = useNavigate();
  return (
    <>
      <div>
        {TABS.map((item) => (
          <button key={item} onClick={() => navigate(item)}>
            {item}
          </button>
        ))}
      </div>
        <Routes>
          {TABS.map((item) => (
            <Route key={item} path={item} element={<>{item}</>}/>
          ))}
        </Routes>
    </>
  )
}
export default UseNavigate;

2、Link、NavLink实现跳转

注意⚠️

• 最好使用Link、NavLink方式实现跳转，

App.tsx

import { BrowserRouter } from 'react-router-dom';
import UseLink from './components/UseLink';
function App() {
  return (
    <>
     <BrowserRouter>
       <UseLink />
     </BrowserRouter>
    </>
  )
}
export default App

src/components/UseLink.tsx

import { Link, NavLink, Route, Routes } from 'react-router-dom';

const TABS = ['home', 'about', 'contact'] as const;

function UseLink() {
  return (
    <>
      <div>
        {TABS.map((item) => (
            // <Link key={item} to={item}>{item}</Link>
            <NavLink key={item} to={item}>{item}</NavLink>
        ))}
      </div>
        <Routes>
          {TABS.map((item) => (
            <Route key={item} path={item} element={<>{item}</>}/>
          ))}
        </Routes>
    </>
  )
}
export default UseLink;