React Router Redirect记录

最新推荐文章于 2025-10-01 05:27:43 发布

原创最新推荐文章于 2025-10-01 05:27:43 发布 · 564 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react

React Router 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了在React Router中如何使用Redirect进行页面重定向，包括解决导入错误的问题、Redirect组件的参数用法，如to、from、state、push等属性的详细解释，并举例说明了在不同场景下的应用，如默认页面跳转、未匹配路径的处理以及精确和严格匹配的实现。

react-router之Redirect

此文章有部分内容借鉴：https://www.jianshu.com/p/97e4af32811a，感谢~

Redirect

渲染<Redirect>将导航到新位置。新位置将覆盖历史堆栈中的当前位置，就像服务器端重定向（HTTP 3xx）一样。

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route, Redirect, Switch } from 'react-router-dom'

let loggedIn = false;

ReactDOM.render(
    <Router>
        <Switch>
            <Route exact path="/">
                {loggedIn ? <Redirect to="/dashboard" /> : <PublicHomePage />}
            </Route>
        </Switch>
    </Router>,
    document.getElementById('root')
)

function PublicHomePage() {
    return <div>PublicHomePage</div>
}

在书写此代码的时候遇见这样一个问题：开始引入的时候是这样写的 import { Router, Route, Redirect, Switch } from ‘react-router-dom’；但是运行代码时报错：The prop history is marked as required in Router, but its value is `undefine. in Router；

解决办法1：
引入方法改为：import { BrowserRouter as Router, Route, Redirect, Switch } from ‘react-router-dom’
解决办法2：

import React from "react";
import ReactDOM from "react-dom";
import { Router, Route, Redirect, Switch } from 'react-router-dom'
import { createBrowserHistory } from "history";  //修改处
const customHistory = createBrowserHistory();  //修改处
/*
  import { createHashHistory } from "history";
  const customHistory = createHashHistory(); 这样改也可以，url显示不同
*/ 

let loggedIn = false;

ReactDOM.render(
    <Router history={customHistory}>  //修改处
        <Switch>
            <Route exact path="/">
                {loggedIn ? <Redirect to="/dashboard" /> : <PublicHomePage />}
            </Route>
        </Switch>
    </Router>,
    document.getElementById('root')
)

function PublicHomePage() {
    return <div>PublicHomePage</div>
}

结果：loggedIn为false时，页面显示PublicHomePage(执行<PublicHomePage />)；loggedIn为true时，重定向到/dashboard(执行<Redirect to="/dashboard" />)，url链接例如：http://localhost:8080/dashboard。

to：string

要重定向到的URL。可以是path-to-regexp@^1.7.0能够理解的任何有效URL路径。在to中使用的所有URL参数都必须由from覆盖。

<Redirect to="/somewhere/else" />

to：object

要重定向到的位置，其中 pathname 可以是 path-to-regexp 能够理解的任何有效的 URL 路径。

<Redirect
  to={{
    pathname: "/login",
    search: "?utm=your+face",
    state: { referrer: currentLocation }
  }}
/>

// 本地运行url：http://localhost:8080/login?utm=your+face

state对象可以通过重定向到组件中的this.props.location.state访问。而 referrer 键（不是特殊名称）将通过路径名 /login 指向的Login组件中的 this.props.location.state.referrer 进行访问。

push：bool

如果为true，则重定向将把新条目推送到历史记录中，而不是替换当前条目。

<Redirect push to="/somewhere/else" />

from：string

要从中重定向的路径名。 path-to-regexp@^1.7.0可以理解的任何有效URL路径。所有匹配的URL参数都提供给to。必须包含在to中使用的所有参数。将忽略to未使用的其他参数。
note：这只能用于在<Switch>内部渲染<Redirect>时匹配位置。有关详细信息，请参见<Switch children>。

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route, Redirect, Switch, Link } from 'react-router-dom'

ReactDOM.render(
    <Router>
        <div>
            <h2>redirect from to</h2>
            <ul>
                <li><Link to="/">Home</Link></li>
                <li><Link to="/page-one">Page One</Link></li>
                <li><Link to="/page-two">Page Two</Link></li>
            </ul>
            <Switch>
                <Route path="/" exact children={<Home />} />
                <Route path="/page-one" children={<PageOne />} />
                <Route path="/page-two" children={<PageTwo />} />
                <Redirect from='/*' to='/' />
            </Switch>
        </div>
    </Router>,
    document.getElementById('root')

)

function Home() {
    return <div>Home hahaha</div>
}
function PageOne() {
    return <div>PageOne hahaha</div>
}
function PageTwo() {
    return <div>PageTwo hahaha</div>
}

进入页面默认展示匹配Home页，点击不同选项进入不同页面地址，如图所示：
在这里插入图片描述

当我在浏览器里输入一个未能匹配到已设置的路径时，执行<Redirect from=’ / *’ to=’ / ’ />代码，进入到首页Home，例如：输入http://localhost:8080/page，/page无对应，会直接跳转到Home（显示见上第一张图）

exact：bool

– 完全匹配；相当于Route.exact。
– note：当在<Switch>中渲染<Redirect>时，这只能与from一起使用，以精确匹配位置。有关详细信息，请参见<Switch children>。

将上面代码中的<Redirect>代码换成如下代码时，只有在地址栏里输入完全相同的路径时，此代码才会跳转到对应的路径地址：

  <Redirect exact from='/my' to='/' />  {/*exact*/} 
  // 输入：http://localhost:8080/my，跳转到首页
  // 输入：http://localhost:8080/other,不跳转

strict：bool

– 严格匹配；相当于Route.strict
– note：当在<Switch>内部渲染<Redirect>时，这只能与from一起使用，以严格匹配位置。有关详细信息，请参见<Switch children>。

  <Redirect strict from='/huahua' to='/' />  {/*strict*/}