react路由的安装方法:1、通过“npm i react-router-dom@5.0 -S”安装路由;2、使用“import { HashRouter as Router, Route, NavLink } from ‘react-router-dom’”方式导入路由即可。
本教程操作环境:Windows10系统、react-router-dom5.0版、Dell G3电脑。
react路由怎么安装?
react 路由安装及简单使用
一.react安装路由
安装:npm i react-router-dom@5.0 -S (最新版本为6.0)
导入:
import { HashRouter as Router, Route, NavLink } from 'react-router-dom'
登录后复制
路由配置:
1.所有路由相关内容都应该放在组件内
2.链接使用:
3.页面使用:
示例:简单的路由跳转
function App() { return (//exact 精确匹配 首页| 关于{/* 路由页面 */} )}export default App function Home() { return首页页面} function About() { return关于页面}
登录后复制
二.路由传参
路由传参形式
1.链接传参
2.参数传参
3.参数获取 props.match.params.id
常用历史操作的方法
1.go()历史跳转记录
2.goBack(返回)
3.push()添加记录跳转
4.replace()替换记录并跳转
示例:
import { HashRouter as Router, Route, NavLink, Redirect, Switch, Prompt, Link } from 'react-router-dom'// NavLink 会比 link自动添加一个active的classfunction App() { return (首页| 关于 产品abc 产品123{/* 路由页面 */} )}export default App function Produce({ match, history, location }) { // console.log(match); return ()} function Home() { return产品{match.params.id}
首页页面} function About() { return关于页面}
登录后复制
子路由传参
示例:
// 导入路由相关组件// 导入哈希路由 别名router// Route路由页面// NvaLink 导航链接import { HashRouter as Router, Route, NavLink, Redirect, Switch, Prompt, Link } from 'react-router-dom'// NavLink 会比 link自动添加一个active的classfunction App() { return (首页| 关于 产品abc 产品123 管理{/* 路由页面 */} )}export default Appfunction NoMatch({ location, history }) { return ()}function Admin() { return (404
你爹来咯
{location.url}
首页)}function Dash() { return (概览
列表概览)}function OrderList() { return (订单列表)}function Produce({ match, history, location }) { // console.log(match); return ()} function Home() { return产品{match.params.id}
首页页面} function About() { return关于页面}
登录后复制
推荐学习:《react视频教程》
以上就是react路由怎么安装的详细内容,更多请关注【创想鸟】其它相关文章!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。
发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2922705.html