react学习笔记5 react路由(-)

react-router-dom主要知识点示例：

1.路由器（router）

分为BrowserRouter和HashRouter

BrowserRouter：使用h5的History API来管理浏览器的历史记录。

HashRouter：使用URL的hash来管理历史记录，对于不支持h5 History API的老浏览器比较友好。

BrowserRouter

    import {Browser as Router,Route,Routes} from 'react-router-dom'
    function App(){
        return (
            <Router>
                <Routes>
                    <Route path="/" element={<Home />}/>
                    <Route path="/about" element={<About />}/>
                </Routes>
            </Router>
        )
    }

HashRouter

import {HashRouter as Router,Routes,Route} from 'react-router-dom'
 function App(){
        return (
            <Router>
                <Routes>
                    <Route path="/" element={<Home />}/>
                    <Route path="/about" element={<About />}/>
                </Routes>
            </Router>
        )
    }

2.路由（Route）

Route:基本的路由组件，用于匹配URL并渲染相应的组件。

IndexRoute:用于匹配没有具体路径的索引路由，例如/（已被替代）。

Switch:已经被Routes替代，用于渲染第一个匹配的Route。

Routes:渲染第一个匹配的Route组件。

3.Navigation

Link:用于创建链接到特定路由的链接。

import {Link} from 'react-router-dom'
function NavBar(){
    return (
        <nav>
            <ul>
                <li><Link to="/">Home</Link></li>
                <li><Link to="/about">About</Link></li>
            </ul>
        </nav>
    )
}

NavLink：类似Link，提供一些额外的功能，如激活高亮。

import { NavLink } from 'react-router-dom';

function Navbar() {
  return (
    <nav>
      <ul>
        <li><NavLink to="/" end>Home</NavLink></li>
        <li><NavLink to="/about">About</NavLink></li>
      </ul>
    </nav>
  );
}

Navigate：用于程序化的导航到另一个路由。

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

function RedirectToHome() {
  const navigate = useNavigate();
  React.useEffect(() => {
    navigate('/');
  }, [navigate]);
  return null;
}