组件
index.js
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>
);
- BrowserRouter:整个前端路由以 history 模式开始,包裹根组件
- HashRouter:整个前端路由以 hash 模式开始,包裹根组件
jsx
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;
-
Routes:提供上下文环境
-
Route: 书写对应的路由和对应的组件
- path:匹配的路由
- element:匹配路由时要渲染的组件
-
Navigate:重定向,类似于 useNavigate 的返回值函数,但这个是组件
-
NavLink:和 Link 一样会被渲染为 a 标签,和 Link 的区别是他有一个名为 active 的激活样式,所以一般用于顶部或者左侧导航栏的跳转
-
Outlet:相当于 Vue Router 的 router-view;需要有嵌套 ROute 或者 useRoutes 中使用children 属性的配置,children 对应一个数组,数组里是一个个路由
jsx
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>
);
}
Hooks
- useLocation:获取到 location 对象,location 对象中可以获取 state(其他路由跳转过来的时候会在state 里面传递额外的数据) 等的属性
jsx
const location = useLocation()
console.log(location.state)
- useNavigate:
jsx
const navigate = useNavigate()
// 这里路径必须是 /home 因为如果从 / -> /home 的话,/home 页的 location 并不会传递
navigate('/home', {
state: {
alert: '用户添加成功',
type: 'success'
}
})
- useParams:获取动态参数
jsx
<Route path="/detail/:id" element={<Detail />}/>
const {id} = useParams()
- useRoutes:类似于 Vue Router 声明路由的方式
jsx
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;
jsx
import RouterConfig from './router/router.jsx'
// ...
<RouterConfig />