您的位置:

React页面跳转要点总结

一、React页面跳转有几种方式

1、使用JS的location.href实现页面跳转。

这种方式相当于浏览器的超链接。直接更改当前页面的URL地址,跳转到指定的页面。但是这种方式对于单页面应用来说并不适用。

{`window.location.href = 'http://www.example.com'`}

2、使用JS的window.open()方法实现打开新窗口(url, name, features, replace)

window.open()方法可以在新窗口或者标签页中打开指定URL的页面。这个方法支持打开同源和跨域的页面,并且可以自定义新页面的名称、属性(例如窗口大小、工具栏等)、以及是否取代(replace)当前页面历史记录中的一项。

{`window.open(
  'https://www.example.com',
  '_blank', // 新窗口
  'height=600,width=800,resizable=yes', // 属性
  true // 替换当前页面历史记录
);`}

3、使用react-router-dom实现页面间的跳转。

React-router-dom是React官方提供的一个路由库,可以实现适用于单页应用程序的动态路由。该库中提供了很多用于页面之间跳转的API,包括<Link>, , 等组件。

二、React跳转页面的方法有哪些

使用react-router-dom实现页面间跳转的方式相较于前两种方式更为灵活和实用。下面介绍几个常用的API。

三、React页面跳转路由

React-router-dom库提供的 组件都可以实现页面跳转的路由功能。其中, 是使用HTML5历史记录API来保持UI和URL同步的,适用于现代浏览器, 则是使用URL中的hash部分来保证同步,适用于所有浏览器, 则是在内存中跟踪URL重定向,适用于没有URL管理需求的测试或非浏览器环境。下面以 为例。

{`import { BrowserRouter, Route, Link } from 'react-router-dom';

const Home = () => 

Home

; const About = () =>

About

; const App = () => (
  • <Link to="/">Home
  • <Link to="/about">About
);`}

四、React页面跳转路由刷新机制

在使用React-router-dom进行页面跳转时,需要注意页面刷新的机制。

组件为例,如果在部署React应用时,你可能会遇到访问某个具体URL时和刷新页面的情况。在服务器上,该URL对应的资源只存在于客户端浏览器上的内存中,因此在刷新页面或向该URL直接提出HTTP请求时,服务器无法返回对应的资源,结果是会返回404 Not Found错误。

为了避免这个问题,可以配置Web服务器以返回index.html文件。如果有开发过SPA应用,这个问题应该会很熟悉,其实解决方法也是类似的。如果你使用的是非常流行的Web服务器,例如Apache/Nginx,只需确保服务器会将每个请求都重定向到index.html即可。

五、React页面跳转路由拦截

当我们需要对用户进行权限控制或者其他拦截时,可以在React-router-dom中使用中间件(middleware)来实现路由拦截。下面以示例代码说明。

{`import { BrowserRouter, Route, Redirect } from 'react-router-dom';

const isAuthenticated = false; // 假设这里返回false表示未认证

const PrivateRoute = ({ component: Component, ...rest }) => (
  
    (
      isAuthenticated
        ? 
    
        : 
    
    )}
  />
);

const Home = () => 
    

Home

; const Login = () =>

Login

; const App = () => ( );`}

六、React页面跳转传值

在React-router-dom中传递参数有两种方式:参数使用URL的querystring或url部分,或者直接通过React组件属性来进行传递。下面以实例代码进行说明。

{`// 通过URL参数传递参数
import { BrowserRouter, Route, Link } from 'react-router-dom';

const Home = () => 

Home

; const User = ({ match }) =>

Hello, {match.params.name} !

; // 参数名用:name表示 const App = () => (
  • <Link to="/">Home
  • <Link to="/user/john">User - John
  • <Link to="/user/bob">User - Bob
); // 通过组件属性传递参数 import { BrowserRouter, Route, Link } from 'react-router-dom'; const Home = () =>

Home

; const User = ({ name }) =>

Hello, {name} !

; // 通过属性传递 const App = () => (
  • <Link to="/">Home
  • <Link to={{ pathname: '/user', state: { name: 'John' } }}>User - John
  • <Link to={{ pathname: '/user', state: { name: 'Bob' } }}>User - Bob
} />
);`}

七、React页面跳转传参

React-router-dom提供了<Link>、 等组件,用于实现页面间的跳转。可以通过在这些组件中添加参数进行页面跳转和传参。

{`import { Link } from 'react-router-dom';

const Home = () => 

Home

; const App = () => (

App

  • <Link to={{ pathname: '/about', search: '?sort=name' }}>About(按名称排序)
  • <Link to={{ pathname: '/about', search: '?sort=date' }}>About(按日期排序)
);`}

八、React页面跳转闪屏

React中实现SPA应用常见的办法是,在页面渲染完毕之后再显示整个React应用。这样做的好处是用户不会看到未经过React渲染的DOM元素,网站也可以更快地加载。但是这种方法容易导致首次加载的页面出现“白屏”或“闪屏”的问题。

为了避免这个问题,可以在React-router-dom中使用React Suspense和React.lazy实现组件的懒加载。下面以示例代码进行说明。

{`import React, { Suspense, lazy } from 'react';
import { BrowserRouter, Route, Link } from 'react-router-dom';

const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));

const App = () => (
  
   
    
    
  • <Link to="/">Home
  • <Link to="/about">About

Loading...
}>