react-router多级路由设置默认子路由

最终效果图
目录文件路径
代码

最终效果图

目录文件路径

代码

src/App.js

多级路由的Route配置不能加 exact，否则子路由匹配不进去

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
import Home from './Page/Home'
import News from './Page/News'class App extends React.Component {render() {return (<div><Router><div style={{ width: '20%', height: '200px', float: 'left', backgroundColor: '#eee' }}><h2>一级路由</h2><ul>{/* 使用Link组件设置路由跳转 to属性值为跳转路径 */}<li><Link to='/'>home</Link></li><li><Link to='/news'>News</Link></li></ul></div><div style={{ width: '70%', float: 'left' }}>{/* 使用Route设置路由配置  component属性值为匹配路径后跳转的组件页面*/}<Route path='/' exact component={Home} />{/* 多级路由 这里不能加 exact  否则子路由匹配不进去 */}<Route path='/news' component={News} /></div></Router></div >)}
}
export default App;

src/Page/Home.js

import React from 'react';export default function Home() {return (<div>Home</div>)
}

src/Page/News.js
二级路由的默认子路由路径和父路由一致并且设置exact属性
若不设置exact属性则每次都会保留GameNews页面

import React, { Component } from 'react';
import { Route, Link } from 'react-router-dom'
import CarNews from './NewsPage/CarNews'
import GameNews from './NewsPage/GameNews'
import SportsNews from './NewsPage/SportsNews'
class News extends Component {render() {return (<div><ul><h3>二级路由:</h3><li style={{ display: 'inline-block', margin: '10px' }}><Link to='/news/'>GameNews</Link></li><li style={{ display: 'inline-block', margin: '10px' }}><Link to='/news/carNews'>CarNews</Link></li><li style={{ display: 'inline-block', margin: '10px' }}><Link to='/news/sportsNews'>SportsNews</Link></li></ul><div style={{ paddingLeft: '80px' }}>{/* 二级路由的默认子路由路径和父路由一致 并且设置exact属性 该页面默认进入GameNews页面*/}{/* 若不设置exact属性 则每次都会保留GameNews页面 */}<Route path='/news/' exact component={GameNews}></Route><Route path='/news/carNews' component={CarNews}></Route><Route path='/news/sportsNews' component={SportsNews}></Route></div></div>);}
}
export default News;

src\Page\NewsPage\CarNews.js

import React from 'react';export default function CarNews() {return (<div>二级页面内容：CarNews</div>)
}

src\Page\NewsPage\GameNews.js

import React from 'react';export default function GameNews() {return (<div>二级页面内容： GameNews</div>)
}

src\Page\NewsPage\SportsNews.js

import React from 'react';export default function SportsNews() {return (<div>二级页面内容： SportsNews</div>)
}

react-router多级路由设置默认子路由相关推荐

Vue中路由嵌套（子路由）
路由的嵌套就是点击一个路由地址后,继续点击,进入到另外一个路由地址下,即第二个路由就是第一个路由的子路由. 根据我们前面学习的VueRouter的知识,可以直接写出代码来实现: 一般写法 <!D ...
以太网速率怎么手动设置_OPENWRT-KOOLSHARE软路由，一级/单臂/二级/旁软路由设置单臂路由联网教程...
[此文原创]此文基于单口软路由讨论一级/单臂路由 LAN:IPV4设置除192.168.1.1之外和你局域网不冲突的地址,关闭桥接接口,物理设置eth0 WAN:协议改成PPPOE,物理设置eth0 ...
Vue学习笔记-Router死活跳不过去子路由
Vue-Router的index.js里写了个这个: // 用户相关界面 {path: '/user',children: [{path: 'login',component: () => im ...
android下网关路由设置,爱快路由网关到网关配置open***
一,准备: 路由器1: wan:192.168.122.251 lan:172.16.1.251 路由器2: wan:192.168.122.252 lan:172.16.2.251 客户端: 172 ...
Taro+react开发（82):设置默认属性
react学习(27)---antdesign设置默认值
{getFieldDecorator('activityTimeStamp', {rules: [{ required: true, message: '请选择活动时间' }],initialValu ...
Angular中的路由配置、路由重定向、默认选中路由
场景 Angular介绍.安装Angular Cli.创建Angular项目入门教程: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/detail ...
Linux免设置路由端口映射,2014/04/01 演示中设置linux路由器、端口过滤的使用、路由设置...
2.linux主机做为路由器,具有数据转发和随机丢包的功能 1.1.iptables 基于内核的防火墙 1.2.编写防火墙设置的脚本及鸟哥的linux私房菜(服务器篇) linux 路由器的设置参 ...
[vue3+django]升级_权限功能+路由设置+动态路由
一.背景要对vue3项目进行升级,主要是添加用户权限,根据不同用户展示不同路由. 二.思路 1.对django后端进行处理,包括添加权限信息列 2.对后端登录接口进行处理,将权限信息通过respon ...

react-router多级路由设置默认子路由

react-router多级路由设置默认子路由

最终效果图

目录文件路径

代码

react-router多级路由设置默认子路由相关推荐

最新文章

热门文章