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.

  • 相关阅读:
    CF1096C Polygon for the Angle
    CF1149A Prefix Sum Primes
    CF1153C Serval and Parenthesis Sequence
    leetcode134 Gas Station
    leetcode23 Merge k Sorted Lists
    leetcode982 Triples with Bitwise AND Equal To Zero
    CF1110C Meaningless Operations
    【bzoj4567】SCOI2016背单词
    【不定期更】【友链整理】
    【bzoj2006】NOI2010超级钢琴
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6577492.html
Copyright © 2011-2022 走看看