React Router(react-router-dom 6 ) 安装 、引入、配置、重定向

1.安装

npm install react-router-dom@6 --save    现在不指定版本号，也会默认安装路由6的版本

2.引入

main.js

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

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

值得注意的是，官方强烈建议不要使用 HashRouter;

3.配置

App.js

import { Route, Routes, Link } from 'react-router-dom';
import {Home} from './view/home' 
import {About} from './view/about'

import './App.css'

function App() {
  return (
    <div className="App">
      <ul>
        <li>
          <Link className="list-group-item" to="/home">home</NavLink>
        </li>
        <li>
          <Link to="/about">about</NavLink>
        </li>
      </ul>
      <Routes>
        <Route path='/home' element={<Home />} />
        <Route path='/about' element={<About />} />
        {/* 路由重定向 */}
        <Route path='/' element={<Navigate to="/home"/>}/>
        {/* 当没有其他路由与 URL 匹配时，匹配 path='*'的路由 */}
        <Route path='*' element={<Home />} />
      </Routes>
    </div>
  )
}

export default App