模块化react-router配置方法详解
前端  /  管理员 发布于 4年前   731
react-router模块化配置
因为公司的需要最近踏进了react坑,一直在挖坑填坑,在路由这一块折腾得不行。
直接进入主题,配置react-router模块化
1.先下载react-router-dom
npm install react-router-dom --save
2.在相应的文件引入react-router-dom相应的模块
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
3.在src子创建一个module目录,接着在module目录在创建一个router.js文件,用来配置路由。
//router.jsimport Index from '../components/Index'import New from '../components/New' import NewList from '../components/NewList' import NewContent from '../components/NewContent' const routes = [ { path:"/", component:Index, exact:true }, { path:"/new", component:New, routes:[ { path:"/new/", component:NewContent }, { path:"/new/newList", component:NewList } ] }, ]export default routes
4.在app.js根目录添加相应的跳转路径。
//app.jsimport React from 'react';import './App.css';import { BrowserRouter as Router, Route, Link } from "react-router-dom";import router from "./modules/routers"function App() { return ({ router.map((router,index)=>{ if(router.exact){ return );}export default App;( ) } /> }else{ return ( ) } /> } }) }
注意点:嵌套路由千万不要在
注意点:嵌套路由千万不要在
注意点:嵌套路由千万不要在
解析一下,
5.在有子路由的页码配置跳转
import React ,{Component} from 'react';import { BrowserRouter as Router, Route, Link } from "react-router-dom";class New extends Component{ render(){ return(
- New
- NewList
{ this.props.routes.map((item,index)=>{ return}) } ) } }export default New 最后的结果为:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
您可能感兴趣的文章:
- React-router v4 路由配置方法小结
- 关于react-router的几种配置方式详解
上一条:
react 组件传值的三种方法
下一条:
浅谈[email protected] 使用方法和源码分析
122 在
学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..123 在
Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..原梓番博客 在
在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..博主 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..1111 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
Copyright·© 2019 侯体宗版权所有·
粤ICP备20027696号