react-router-dom6(对比 router5)快速入门指南

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

export default function App() {
  return (
    <Fragment>
      <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 className='list-group-item' to="/home">Home</NavLink >
              <NavLink className='list-group-item' to="/about">About</NavLink >
            </div>
          </div>
          <div className="col-xs-6">
            <div className="panel">
              <div className="panel-body">
                {/* 注册路由 */}
                <Routes>
                  <Route path='/about' element={<About />} />
                  <Route path='/home' element={<Home />} />
                </Routes>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Fragment>
  )
}

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

// 重定向
// react-router-dom v5
<Redirect to="/home" />
// react-router-dom v6
<Route path='/' element={<Navigate to="/home" />} />

<Navigate to="/about" replace />

.LinkBackColor {
  background-color: orange !important;
  color: white !important;
}

<NavLink activeClassName='LinkBackColor' className="list-group-item" to="/about">About</NavLink>

<NavLink className={
   ({ isActive }) => { return isActive ? "list-group-item LinkBackColor" : "list-group-item" }
} to="/about">About</NavLink >

function computedClassName({ isActive }) {
  return isActive ? "list-group-item LinkBackColor" : "list-group-item"
}

<NavLink className={computedClassName} to="/home">Home</NavLink >

src结构
├─App.jsx
├─index.js
├─routes
|   └index.js
├─pages
|   ├─About.jsx
|   └Home.jsx

import { Navigate } from "react-router-dom"
import About from "../pages/About"
import Home from "../pages/Home"

export default [
  {
    path: '/about',
    element: <About />
  },
  {
    path: '/home',
    element: <Home />
  },
  {
    path: '/',
    element: <Navigate to="/about" />
  }
]

import { NavLink, useRoutes } from 'react-router-dom'
import routes from './routes'

// 根据路由表生成对应的路由规则
const element = useRoutes(routes)

// 注册路由
+ {element}
- <Routes>
-  <Route path='/about' element={<About />} />
-  <Route path='/home' element={<Home />} />
-  <Route path='/' element={<Navigate to="/about" />} />
- </Routes>

{
  path: '/home',
  element: <Home />,
  children: [
    {
      path: 'message',
      element: <Message />
    },
    {
      path: 'news',
      element: <News />
    }
  ]
},

import React from 'react'
import { NavLink, Outlet } from 'react-router-dom'

export default function Home() {
  return (
    <div>
      <h2>Home组件内容</h2>
      <div>
        <ul className="nav nav-tabs">
          <li>
            <NavLink className='list-group-item' to='news'>News</NavLink>
          </li>
          <li>
            <NavLink className='list-group-item' to='message'>Message</NavLink>
          </li>
        </ul>
        {/* 指定路由组件呈现的位置 */}
        <Outlet />
      </div>
    </div>
  )
}

<NavLink className='list-group-item' to='news'>News</NavLink>
中的to属性有三种写法：
1. to='news'
2. to='./news'
3. to='/home/news'  //这一种与react-router-dom5中一样