React Router v4 allows us to render Routes as components wherever we like in our components. This can provide some interesting use cases for creating dynamic routes on our applications.

import React from 'react';
import {
BrowserRouter as Router,
Route,
Link
} from 'react-router-dom'; const Links = () =>
<nav>
<Link to="/home">Home</Link>
<Link to="/about">About</Link>
</nav> const Header = ({match}) => (
<div className="header">
<Route path="/:page"
render={({match}) => (
<h1>{match.params.page} header</h1>)} />
</div>
) const Content = ({match}) => (
<div className="content">
<Route path="/:page"
render={({match}) => (
<p>{match.params.page} content</p>)} />
</div>
) const App = (props) => (
<Router basename={props.path}>
<div>
<Links />
<Header />
<Content />
</div>
</Router>
) export default App

[React Router v4] Render Multiple Components for the Same Route的更多相关文章

  1. [React Router v4] Render Nested Routes

    With React Router v4 the entire library is built as a series of React components. That means that cr ...

  2. [React Router v4] Render Catch-All Routes with the Switch Component

    There are many cases where we will need a catch-all route in our web applications. This can include ...

  3. [React Router v4] Conditionally Render a Route with the Switch Component

    We often want to render a Route conditionally within our application. In React Router v4, the Route ...

  4. [Web 前端] React Router v4 入坑指南

    cp from : https://www.jianshu.com/p/6a45e2dfc9d9 万恶的根源 距离React Router v4 正式发布也已经过去三个月了,这周把一个React的架子 ...

  5. [React Router v4] Intercept Route Changes

    If a user has entered some input, or the current Route is in a “dirty” state and we want to confirm ...

  6. [React Router v4] Redirect to Another Page

    Overriding a browser's current location without breaking the back button or causing an infinite redi ...

  7. [React Router v4] Parse Query Parameters

    React Router v4 ignores query parameters entirely. That means that it is up to you to parse them so ...

  8. React Router V4发布

    React Router V4 正式版发布,该版本相较于前面三个版本有根本性变化,遵循 Just Component 的 API 设计理念. 本次升级的主要变更有: 声明式 Declarative 可 ...

  9. [React Router v4] Use Regular Expressions with Routes

    We can use regular expressions to more precisely define the paths to our routes in React Router v4. ...

随机推荐

  1. vmware workstation15.1.0下载地址及密钥(亲测可用)

    官网下载链接: https://download3.vmware.com/software/wkst/file/VMware-workstation-full-15.1.0-13591040.exe ...

  2. arcgis webapp builder 安装试用

    ArcGIS WebApp Builder 是针对开发者的,用于高速构建基于HTML5/Javascript 技术的美观的 Web应用的一个工具. 用过Flex版本号的AppBuilder应该非常清楚 ...

  3. 有趣的Ruby-学习笔记4

    Ruby块 块.在我看来就是插入一段可变的函数 block_name{ statement1 statement2 .......... } 看起来不知道是什么,只是别急,继续往下看. 块函数通过yi ...

  4. HTML5梦幻星空,可用作网页背景

    <html> <head> <title>星空</title> <META http-equiv="X-UA-Compatible&qu ...

  5. 【2017中国大学生程序设计竞赛 - 网络选拔赛 hdu 6150】Vertex Cover

    [链接]点击打开链接 [题意] 有人写了一个最小点覆盖的贪心算法,然后,让你去hack它. 并且,要求这个算法得到的错误答案,是正确答案的三倍. 让你任意输出hack数据,点数<=500 [题解 ...

  6. oracle-function 练习

    /* *scm_iss.test_imti_fun2 *带有输入參数的Function */ CREATE OR REPLACE FUNCTION TEST_IMTI_FUN2(P_NO IN NUM ...

  7. jquery如何实现表单post方式提交

    jquery如何实现表单post方式提交 一.总结 一句话总结:即使js给form对象提供了submit()方法,那也不意为表单中可以不写提交按钮这个元素,即form表单依然需要五脏俱全才可以使用js ...

  8. 学习笔记:mpvue开发小程序——入门

    接下来可能要开发一个小程序,同事推荐使用mpvue,那么我提前熟悉下. 官网地址:http://mpvue.com/ 1.快速上手 http://mpvue.com/mpvue/quickstart/ ...

  9. 通过Rman catalog 创建及管理Oracle数据库备份

    基本环境信息target DB (需备份数据库) 192.168.199.67 ORACLE_SID=zgw HOSTNAME=Oracle11 catlog DB (备份管理数据库) 192.168 ...

  10. Android Studio设置图片背景及主题设置

    因为Android Studio是基于IDEA的,所以IDEA里面能用的插件Android Studio也能用,这次图片背景是依赖IDEA下的一个插件,名为BackgroundImage的插件,用户可 ...