react-router-dom(5版本)

npm install react-router-dom@5

index.js

import React from 'react'
import { createRoot } from 'react-dom/client'
import { BrowserRouter,HashRouter} from "react-router-dom";

import App from './App'

const container = document.getElementById('root')
const root = createRoot(container)
root.render(<BrowserRouter><App/></BrowserRouter>)
//root.render(<HashRouter><App/></HashRouter>)

使用

import React from 'react'
import { NavLink, Route,Link,Switch,Redirect } from "react-router-dom";

export default function Header(props) {
  // console.log(props)
  return (
    <div>
         <Switch>//switch提高路由匹配效率
          	<Route path="/home" exact component={Home} />{//Home路由组件} //添加exact属性 开启路由严格匹配模式
        	<Route path="/about" component={About} /> {//About路由组件}
            <Redirect to="/home"/> //路由重定向
         </Switch>
        <Link className="list-group-item" to="/about" replace> {//replace模式路由跳转不可回退}
          About
        <Link>
        <NavLink activeClassName="demo" className="list-group-item" to="/home">
          Home //NavLink点击后可对该标签添加一个active的类名,activeClassName可以指定该类名的名称
        </NavLink> 
     </div>
  )
}

NavLink封装

//封装
import React from 'react'
import { NavLink } from 'react-router-dom'

export default function MyNavLink(props) {
  return (
    <NavLink activeClassName="demo" className="list-group-item" {...props}/>
  )
}

//使用
<MyNavLink to="/home">Home</MyNavLink>

withRouter

withRouter 可以加工一般组件,让一般组件具备路由组件所特有的api

import React from "react";
import { withRouter } from "react-router-dom";

export default withRouter(function Header(props) {
  console.log(props.history)
  return (
    <div>
      <h2>{props.title}:React Router Demo!!!</h2>
    </div>
  );
});

withRouter

withRouter 可以加工一般组件,让一般组件具备路由组件所特有的api

import React from "react";
import { withRouter } from "react-router-dom";

export default withRouter(function Header(props) {
  console.log(props.history)
  return (
    <div>
      <h2>{props.title}:React Router Demo!!!</h2>
    </div>
  );
});

react-router-dom(6版本)

npm install react-router-dom@5

index.js

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <BrowserRouter>
      <App />
    </BrowserRouter>
);

使用

import React from 'react'
import { NavLink ,Routes, Route, Navigate,useRoutes} from 'react-router-dom'
import Home from './pages/Home'
import About from './pages/About'

export default function App() {
  return (
    <div>
    <div className="row">
      <div className="col-xs-offset-2 col-xs-8">
        <div className="page-header"><h2>React Router Demo</h2></div>
      </div>
    </div>
    <div className="row">
      <div className="col-xs-2 col-xs-offset-2">
        <div className="list-group">
          <NavLink to='/about'>about</NavLink>
          <hr />
          <NavLink to='/home'>home</NavLink>
        </div>
      </div>
      <div className="col-xs-6">
        <div className="panel">
          <Routes>                                          //必须用Routes组件包裹
            <Route path='/about' element={<About/>}></Route>
            <Route path='/home' element={<Home/>}></Route>
            <Route path='/' element={<Navigate to='/home'/>}></Route>//Bavigate 重定向
          </Routes>
        </div>
      </div>
    </div>
  </div>
  )
}

路由组件传参

//路由占位
{
   path:'detail/:id/:content',
   element:<Detail/>
}
//传参
 <Link to={`detail/${item.id}/${item.content}`}>{item.title}</Link>
//接受params参数
import React from 'react'
import { useParams,useMatch } from 'react-router-dom';

export default function Detail() {
  const {id,content} = useParams()
  const match = useMatch('/home/message/detail/:id/:content')
  console.log(match)
  return (
    <div>{id}----{content}</div>
  )
}

//传参
 <Link to={`detail?id=${item.id}&content=${item.content}`}>{item.title}</Link>
//接受useSearchParams参数
import React from 'react'
import { useParams,useMatch,useSearchParams } from 'react-router-dom';

export default function Detail() {
  const [search,setSearch] = useSearchParams()  //setSearch跟新接受到的参数 setSearch('id=001&content=111111')
  const id = search.get('id')
  const content = search.get('content')
  return (
    <div>{id}----{content}</div>
  )
}

//传参
 <Link to={`detail?id=${item.id}&content=${item.content}`}>{item.title}</Link>
//接受state参数
import React from 'react'
import { useLocation } from 'react-router-dom';

export default function Detail() {
  const location = useLocation()
  const {state:{id,content}} = useLocation()
  return (
    <div>{id}----{content}</div>
  )
}

编程式路由导航

import React,{useState} from 'react'
import { Link,Outlet,useNavigate } from 'react-router-dom'

export default function Message() {
  const [messages] = useState([
    {id:'001',title:'消息1',content:'111111111111111111111'},
    {id:'002',title:'消息2',content:'222222222222222222222'},
    {id:'003',title:'消息3',content:'333333333333333333333'},
    {id:'004',title:'消息4',content:'444444444444444444444'},
  ])

  const navigate = useNavigate()

  function showDetail(id,content){
    navigate('detail',{
      state:{id,content}
    })//跳转携带state参数
    navigate(1)//前进
    navigate(-1)//后退
  }

  return (
    <div>Message组件
      <ul>
        {messages.map(item=>{
          return (
            <li key={item.id}>
              <Link 
                to="detail" 
                state={{id:item.id,content:item.content}} 
              >
                {item.title}
              </Link>
              <button onClick={()=>showDetail(item.id,item.content)}>查看详情</button>
            </li>
          )
        })}
      </ul>
      <hr />
      <Outlet/>
    </div>
  )
}