zoukankan      html  css  js  c++  java
  • [React Router v4] Redirect to Another Page

    Overriding a browser's current location without breaking the back button or causing an infinite redirect can be tricky sometimes. In this lesson we'll learn how React Router v4 allows us to easily achieve a redirect without getting bogged down in browser history.

    import React from 'react';
    import { Link, Route, Redirect } from 'react-router-dom';
    
    const Menu = () => (
        <div>
            <h1>Menu</h1>
            <Link to="/menu/food">Food</Link>
            <Link to="/menu/drinks">Drinks</Link>
            <Link to="/menu/123">Redirect</Link>
    
            <Route path="/menu/:section([a-z]+)" render={({ match }) => {
                return <h3>Section: {match.params.section}</h3>
            }}>
            </Route>
            <Route path="/menu/:section(d+)" render={({ match }) => {
                return <Redirect to="/menu/food"></Redirect>
            }}></Route>
        </div>
    );
    
    export default Menu;

    So if we hit /menu/food or /menu/drink, we will go to:

            <Route path="/menu/:section([a-z]+)" render={({ match }) => {
                return <h3>Section: {match.params.section}</h3>
            }}>

    Becase :section([a-z]+) match 'food' or 'drink'.

    If we hit /menu/123, we will go to:

            <Route path="/menu/:section(d+)" render={({ match }) => {
                return <Redirect to="/menu/food"></Redirect>
            }}></Route>

    It will render Redirect component, and redirect us to /menu/food 

  • 相关阅读:
    (C/C++学习笔记) 十四. 动态分配
    (C/C++学习笔记) 十三. 引用
    (C/C++学习笔记) 十二. 指针
    (C/C++学习笔记) 十一. 数组
    (C/C++学习笔记) 十. 函数
    (C/C++学习笔记) 九. 变量的存储类型
    (C/C++学习笔记) 八. 程序控制语句
    并发编程之多进程
    网络编程之Socket
    异常处理
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6603163.html
Copyright © 2011-2022 走看看