一、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
        


      <Suspense fallback={Loading... 
                                                        
原创文章，作者：VLEQB，如若转载，请注明出处：https://www.506064.com/n/332335.html