react二级路由踩坑笔记

需求:登录注册没有公共头尾,其他页面有头尾,所以需要匹配不同的模版。

查看官方文档知晓,路由嵌套可以匹配到子路由:

但实际上这个文档已经是很早的版本了,现在用4.0+版本已经不支持这么嵌套,如果直接这么写,是不能渲染出路由匹配的模板的

经上网查资料一顿折腾后发现,可以在route中使用render方法进行内联嵌套,这样子路由仍然可以通过this.props.children来匹配。

注意,这里有一个坑我找了很久!就是要把/及二级匹配的部分放到/login、/register下方,否则依然匹配不到!!!

 

转载于:https://www.cnblogs.com/xuweijin/p/10807644.html

React 中配置二级路由可以使用 React Router。下面是一个简单的示例: 首先,确保已经安装了 `react-router-dom` 包,可以使用以下命令进行安装: ``` npm install react-router-dom ``` 接下来,假设你有一个名为 `App` 的主组件,它是你的根组件。在 `App.js` 文件中,你可以进行以下配置: ```jsx import React from 'react'; import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import Home from './components/Home'; import About from './components/About'; import NotFound from './components/NotFound'; const App = () => { return ( <Router> <Switch> <Route exact path="/" component={Home} /> <Route path="/about" component={About} /> <Route component={NotFound} /> </Switch> </Router> ); }; export default App; ``` 在这个例子中,我们使用了 `BrowserRouter` 组件作为根组件,它是 React Router 提供的一个用于处理路由的组件。然后,使用 `Switch` 组件包裹了多个 `Route` 组件,这样只有匹配到的第一个路由会被渲染。 在这里,我们配置了两个路由:`/` 和 `/about`。如果当前的 URL 与 `/` 完全匹配,那么会渲染 `Home` 组件;如果当前的 URL 与 `/about` 匹配,那么会渲染 `About` 组件。如果当前的 URL 与任何已定义的路由都不匹配,那么会渲染 `NotFound` 组件。 你可以根据自己的需求添加更多的路由配置,例如更多的二级路由或子组件。希望这个例子对你有所帮助!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值