[React Router v4] Redirect to Another Page-优快云博客

本文介绍如何使用React Router v4实现优雅的页面重定向，避免浏览器历史记录问题及无限重定向。通过路径匹配和Redirect组件，实现不同URL路径下的重定向逻辑。

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

转载于:https://www.cnblogs.com/Answer1215/p/6603163.html