zoukankan      html  css  js  c++  java
  • [React Router v4] Create Basic Routes with the React Router v4 BrowserRouter

    React Router 4 has several routers built in for different purposes. The primary one you will use for building web applications is the BrowserRouter. In this lesson you will import the BrowserRouter and create some basic Route components.

    After create your app with 'creat-react-app', we going to install the react-router-dom:

    npm i -D react-router-dom@next

    Import BrowserRouter:

    import {
        BrowserRouter as Router,
        Route
    } from 'react-router-dom';

    Using Router:

            <Router>
                <div>
                    <Route exact path="/" component={App}></Route>
                    <Route path="/about" component={About}></Route>
                    <Route
                        strict
                        path="/about/"
                        render={() => <h2>About render</h2>}></Route>
                    <Route
                        path="/demo"
                        children={({match}) => match && <h2>demo</h2>}></Route>
                </div>
            </Router>

    Here we use three different ways to render a component or Html to the DOM:

    1. Using Component:

                    <Route exact path="/" component={App}></Route>
                    <Route path="/about" component={About}></Route>

    Here the 'exact' flag tells that it should match only '/'.

    2. Using render:

    we can just render some html:

                    <Route
                        strict
                        path="/about/"
                        render={() => <h2>About render</h2>}></Route>

    3. Using children:

                    <Route
                        path="/demo"
                        children={({match}) => match && <h2>demo</h2>}></Route>

    By default what we write into 'children' will be rendered no matter which path it matchs. 

    If for example, we only want it to be shown when match '/demo', we can check whether there is a 'match' object exists on props.

  • 相关阅读:
    【秒懂音视频开发】10_PCM转WAV
    【秒懂音视频开发】09_播放PCM
    【秒懂音视频开发】08_音频录制02_编程
    【秒懂音视频开发】07_音频录制01_命令行
    【秒懂音视频开发】06_Qt开发基础
    高考数学考点关联表[Ⅳ]
    高考数学考点关联表[Ⅲ]
    高考数学考点关联表[Ⅱ]
    高考数学考点关联表[Ⅰ]
    反比例函数
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6577492.html
Copyright © 2011-2022 走看看