ppt免费模板下载网站有哪些,wordpress下载失败,人寿保险网站,网站发布新闻的好处 seoReact 基础巩固(三十九)——React-Router的基本使用
一、Router的基本使用
Router中包含了对路径改变的监听#xff0c;并且会将相应的路径传递给子组件。
Router包括两个API#xff1a; BrowserRouter使用history模式 HashRouter使用hash模式#xff08;路径后面带有#号…React 基础巩固(三十九)——React-Router的基本使用
一、Router的基本使用
Router中包含了对路径改变的监听并且会将相应的路径传递给子组件。
Router包括两个API BrowserRouter使用history模式 HashRouter使用hash模式路径后面带有#号
尝试在项目中使用HashRouter 安装Router npm install react-router-dom在 index.js 中引入并使用HashRouter import React from react;
import ReactDOM from react-dom/client;
import App from ./App;
import { BrowserRouter, HashRouter } from react-router-dom;const root ReactDOM.createRoot(document.getElementById(root));
root.render(React.StrictModeHashRouterApp //HashRouter/React.StrictMode
);二、路由映射配置 Routes包裹所有的Route在其中匹配一个路由Router5.x使用的是Switch组件 RouteRoute用于路径的匹配 path属性用于设置匹配到的路径element属性设置匹配到路径后渲染的组件Router5.x使用的是component属性exact精准匹配只有精准匹配到完全一致的路径才会渲染对应的组件Router6.x不再支持该属性 Link和NavLink 通常路径的跳转是使用 Link 组件最终会被渲染成a元素NavLink 是在Link基础之上增加了一些样式属性to 属性用于设置跳转到的路径
尝试构建界面并配置路由映射在App.jsx中引入Home和About组件并通过Routes、Route、Link实现简单的路由跳转
import React, { PureComponent } from react;
import { Route, Routes, Link } from react-router-dom;
import Home from ./pages/Home;
import About from ./pages/About;export class App extends PureComponent {render() {return (div classNameappdiv classNameheaderspanheader/spandiv classNamenavLink to/home首页/LinkLink to/about关于/Link/divhr //divdiv classNamecontent{/* 映射关系 path Component */}RoutesRoute path/home element{Home /} /Route path/about element{About /} //Routes/divdiv classNamefooterFooter/div/div);}
}export default App;
查看效果 采用NavLink后可设置active的路由样式 在src/style.css中配置active样式 .nav .active{color: red;font-size: 18px;
}修改App.jsx中的Link为NavLink import React, { PureComponent } from react;
import { Route, Routes, NavLink } from react-router-dom;
import Home from ./pages/Home;
import About from ./pages/About;
import ./style.css;export class App extends PureComponent {render() {return (div classNameappdiv classNameheaderspanheader/spandiv classNamenavNavLink to/home首页/NavLinkNavLink to/about关于/NavLink/divhr //divdiv classNamecontent{/* 映射关系 path Component */}RoutesRoute path/home element{Home /} /Route path/about element{About /} //Routes/divdiv classNamefooterFooter/div/div);}
}export default App; 查看效果
