一、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/zh-tw/n/332335.html