学习笔记（二）: react-router-dom v6 用法

react-router-dom v6

核心概念： router 存储路由文件

  目录结构： router
                      index.js
            components
                      Header
                            index.jsx
            pages
                      About
                            index.jsx
                      Home
                            index.jsx
                            Message
                                    index.jsx
                                    Detail
                                            index.jsx
                            News 
                                    index.jsx
            index.js
            App.js

router

  核心内容： （1）定义routes数组 存放路由规则对象{path,element}，嵌套路由通过children
  代码示例：

import About from '../pages/About'
import Home from '../pages/Home'
import { Navigate } from 'react-router-dom'
import News from '../pages/Home/News'
import Message from '../pages/Home/Message'
import Detail from '../pages/Home/Message/Detail'
export  const routes = [{
  path: '/about',
  element: <About/>,
},
{
  path: '/home',
  element: <Home/>,
  children: [{
    path: 'news',
    element: <News/>,
  },
  {
    path: 'message',
    element: <Message/>,
    children: [{
      path: 'detail',
    element: <Detail/>,
    }]
  },
]
},
{
  path: '/',
  element:  <Navigate to="/about" />,
}  
]

App.js

  代码示例：

import React from 'react'
import Header from './components/Header'
import { NavLink, useRoutes } from 'react-router-dom'
import {routes} from './router'
export default function App() {
  const element = useRoutes(routes)
  function computedISActive(isActive) {
    return isActive? 'list-group-item pink': 'list-group-item'
  }

  return (
    <div>    
        <div>
          <div className="row">
            <div className="col-xs-offset-2 col-xs-8">
              <Header/>
            </div>
          </div>
          
            <div className="row">
              <div className="col-xs-2 col-xs-offset-2">
                <div className="list-group">
                    
                    <NavLink className={({isActive}) => computedISActive(isActive)} to="/about" >About</NavLink>
                    <br></br>
                    <NavLink className={({isActive}) => computedISActive(isActive)} to="/home" >Home</NavLink>
                </div>
              </div>
              <br></br>
              <br></br>
              <div className="col-xs-6">
                <div className="panel">
                  <div className="panel-body"> 
                  {/*<Routes>
                    <Route path='/about' element={<About/>} />
                    <Route path='/home' element={<Home/>} />
                    <Route path='/' element={<Navigate to='/about'/>} />
                  </Routes>*/}
                  {element}
                  </div>
                </div>
              </div>
            </div>
          
        </div>
      </div>
  )
}

index.js

  核心内容： （1）通过 BrowserRouter/HashRouter 包裹根组件App
  代码示例：

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import {BrowserRouter} from 'react-router-dom'


ReactDOM.render(
  <BrowserRouter>
    <App/>
  </BrowserRouter>,
 document.getElementById('root'))

一般组件使用路由属性

  核心内容： （1） 通过 useNavigate hook
  代码示例：

import React from 'react'
import { useNavigate } from 'react-router-dom'
export default function Header() {
  const navigate = useNavigate()

  function forward() {
    navigate(1)
  }
  function back() {
    navigate(-1)
  }
  return (
    <div><div className="page-header"><h2>
      React Router Demo
      <button onClick={forward}>前进</button>
      <button onClick={back} >后退</button>
      </h2></div></div>
  )
}

嵌套路由中展示子路由

  核心内容： （1） Outlet 组件占位 
            （2） link 中to属性不用 / 

import React from 'react'
import { Link } from 'react-router-dom'
import { Outlet, useOutlet } from 'react-router-dom'
export default function Home() {
  console.log('********',useOutlet())
  return (
    <div>
      我是Home的内容
      <br></br>
      <br></br>
      <br></br>
      <ul className="nav nav-tabs">
        <Link to='news'>News</Link>
        <Link to='message'>Message</Link>
      </ul>
      {/** 指定路由组件呈现的位置 */}
      <Outlet/>
    </div>
  )
}

路由组件使用函数式路由

  核心内容： （1） useNavigate hook

import React from 'react'
import { useState } from 'react'
import { Link, Outlet, useNavigate } from 'react-router-dom'
export default function Message() {
  const [message] = useState(['message1','message2','message3'])
  const navigate = useNavigate()
  function change(item) {
    console.log(navigate)
    navigate('detail', {
      replace: false,
      state: {
        item,
      }

    })
  }
  return (
    <div>
      {message.map((item,index) =>{
        return(
          <li key={index}>
                  {/*<Link to={`detail?item=${item}`}>{item}</Link>*/}
                  <Link to="detail" state={
                    {item,}
                  }>{item}</Link>
                  <button onClick={() => change(item)}>查看详情</button>
          </li>
        ) 
      } )}
      <Outlet/>
    </div>
  )
}

路由组件接收参数

  核心内容： （1）useSearchParams  useLocation hooks

import React from 'react'
import { useSearchParams, useLocation } from 'react-router-dom'
export default function Detail() {
  const [search] = useSearchParams()
  console.log(search.get('item'), useLocation())
  // const item = search.get('item')
  const {item} = useLocation().state
 // const {item} = useParams()
  return (
    <div>
      Detail
      <br/>
      {item}
    </div>
  )
}