当前位置:   article > 正文

【React Router】快速使用

【React Router】快速使用

组件

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(
    // history 模式
    <BrowserRouter>
        <App />
    </BrowserRouter>
);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • BrowserRouter:整个前端路由以 history 模式开始,包裹根组件
  • HashRouter:整个前端路由以 hash 模式开始,包裹根组件
import {Navigate, NavLink, Route, Routes} from "react-router-dom";
import Home from "./components/Home";
import About from "./components/About";
import Add from "./components/Add";
import './css/App.css'

function App() {
    return (
        <div id="app" className="container">
            {/*导航栏*/}
            <nav className="navbar navbar-inverse navbar-fixed-top">
                <div className="container">
                    <div className="navbar-header">
                        <button type="button" className="navbar-toggle collapsed" data-toggle="collapse"
                                data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                            <span className="sr-only">Toggle navigation</span>
                            <span className="icon-bar"></span>
                            <span className="icon-bar"></span>
                            <span className="icon-bar"></span>
                        </button>
                        <div className="navbar-brand">学生管理系统</div>
                    </div>
                    <div id="navbar" className="collapse navbar-collapse">
                        <ul className="nav navbar-nav">
                            {/*路由跳转*/}
                            <NavLink to="/home" className="navigation">主页</NavLink>
                            <NavLink to="/about" className="navigation">关于我们</NavLink>
                        </ul>
                        <ul className="nav navbar-nav navbar-right">
                            <NavLink to="/add" className="navigation">添加用户</NavLink>
                        </ul>
                    </div>
                </div>
            </nav>
            <div style={{marginTop: 60}}>
                {/*匹配的路由显示*/}
                <Routes>
                    <Route path="/home" element={<Home/>}/>
                    <Route path="/about" element={<About/>}/>
                    <Route path="/add" element={<Add/>}/>
                    <Route path="/" element={<Navigate replace to="/home"/>}/>
                </Routes>
            </div>
        </div>
    );
}

export default App;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • Routes:提供上下文环境

  • Route: 书写对应的路由和对应的组件

    • path:匹配的路由
    • element:匹配路由时要渲染的组件
  • Navigate:重定向,类似于 useNavigate 的返回值函数,但这个是组件

  • NavLink:和 Link 一样会被渲染为 a 标签,和 Link 的区别是他有一个名为 active 的激活样式,所以一般用于顶部或者左侧导航栏的跳转

  • Outlet:相当于 Vue Router 的 router-view;需要有嵌套 ROute 或者 useRoutes 中使用children 属性的配置,children 对应一个数组,数组里是一个个路由

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>

      {/* This element will render either <DashboardMessages> when the URL is
          "/messages", <DashboardTasks> at "/tasks", or null if it is "/"
      */}
      <Outlet />
    </div>
  );
}

function App() {
  return (
    <Routes>
      <Route path="/" element={<Dashboard />}>
        <Route
          path="messages"
          element={<DashboardMessages />}
        />
        <Route path="tasks" element={<DashboardTasks />} />
      </Route>
    </Routes>
  );
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26

Hooks

  • useLocation:获取到 location 对象,location 对象中可以获取 state(其他路由跳转过来的时候会在state 里面传递额外的数据) 等的属性
const location = useLocation()
console.log(location.state)
  • 1
  • 2
  • useNavigate:
const navigate = useNavigate()
// 这里路径必须是 /home 因为如果从 / -> /home 的话,/home 页的 location 并不会传递
navigate('/home', {
    state: {
        alert: '用户添加成功',
        type: 'success'
    }
})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • useParams:获取动态参数
<Route path="/detail/:id" element={<Detail />}/>
const {id} = useParams()
  • 1
  • 2
  • useRoutes:类似于 Vue Router 声明路由的方式
import * as React from "react";
import { useRoutes } from "react-router-dom";

function Router() {
  const element = useRoutes([
    {
      path: "/",
      element: <Dashboard />,
      children: [
        {
          path: "messages",
          element: <DashboardMessages />,
        },
        { path: "tasks", element: <DashboardTasks /> },
      ],
    },
    { path: "team", element: <AboutPage /> },
  ]);
  return element;
}

export default Router;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
import RouterConfig from './router/router.jsx'
// ...
<RouterConfig />
  • 1
  • 2
  • 3
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Monodyee/article/detail/475038
推荐阅读
相关标签
  

闽ICP备14008679号