react路由初体验(一看就懂)

Posted 2022-10-27 GHUIJS

React Router 以三个不同的包发布到npm 上，它们分别为:

• react-router:路由的核心库，提供了很多的:组件、钩子。
• react-router-dom:包含react-router所有内容，并添加一些专门用于DOM的组件，例如<BrowserRouter>等。
• react-router-native:包括react-router所有内容，并添加一些专门用于ReactNative的API，例如: <NativeRouter>等。

安装

web应用则使用react-router-dom，不指定版本默认安装6版本

npm i react-router-dom@version
pnpm i react-router-dom
yarn add react-router-dom

使用

引入react-router-dom中的BrowserRouter或者HashRouter(HashRouter路由url中包含#)，包裹在要使用路由的根组件(不一定是整个项目的根组件)：

import  BrowserRouter  from 'react-router-dom';
import  NavLink,Routes,Route  from 'react-router-dom';
import Home from './home';
import About from './about';

export const ReactRouterTest = () => 
    return (
        <BrowserRouter>
            <div>
                <NavLink to='/home'>home</NavLink>
                <NavLink to='/about'>about</NavLink>
            </div>
            <Routes>
                <Route path='/home' element=<Home />></Route>
                <Route path='/about' element=<About />></Route>
            </Routes>
        </BrowserRouter>
        )

效果：

路由重定向：

Navigate ：

• 只要<Navigate>组件被渲染，就会修改路径，切换视图；
• replace属性用于控制跳转模式(push 或replace，默认是push) 。

import  BrowserRouter,NavLink,Routes,Route,Navigate  from 'react-router-dom';
import Home from './home';
import About from './about';

export const ReactRouterTest = () => 
    return (
        <BrowserRouter>
            <div>
                <NavLink to='/home'>home</NavLink>
                <NavLink to='/about'>about</NavLink>
            </div>
            <Routes>
                <Route path='/home' element=<Home />></Route>
                <Route path='/about' element=<About />></Route>
                <Route  path='/' element=<Navigate to='/home' />></Route>
            </Routes>
        </BrowserRouter>
        )