React页面跳转要点总结

发布时间：2023-05-22

一、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>、<BrowserRouter>、<Switch>等组件。

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

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

三、React页面跳转路由

React-router-dom库提供的<BrowserRouter>、<HashRouter>、<MemoryRouter>组件都可以实现页面跳转的路由功能。其中：

  • <BrowserRouter> 是使用HTML5历史记录API来保持UI和URL同步的，适用于现代浏览器。
  • <HashRouter> 则是使用URL中的hash部分来保证同步，适用于所有浏览器。
  • <MemoryRouter> 则是在内存中跟踪URL重定向，适用于没有URL管理需求的测试或非浏览器环境。 下面以<BrowserRouter>为例。
import { BrowserRouter, Route, Link } from 'react-router-dom';
const Home = () => <h2 id="title-1">Home</h2>;
const About = () => <h2 id="title-2">About</h2>;
const App = () => (
  <BrowserRouter>
    <ul>
      <li>
        <Link to="/">Home</Link>
      </li>
      <li>
        <Link to="/about">About</Link>
      </li>
    </ul>
    <Route exact path="/" component={Home} />
    <Route path="/about" component={About} />
  </BrowserRouter>
);

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

在使用React-router-dom进行页面跳转时，需要注意页面刷新的机制。 以<BrowserRouter>组件为例，如果在部署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 }) => (
  <Route
    {...rest}
    render={(props) => (
      isAuthenticated
        ? <Component {...props} />
        : <Redirect to={{
            pathname: '/login',
            state: { from: props.location }
          }} />
    )}
  />
);
const Home = () => <h2 id="title-3">Home</h2>;
const Login = () => <h2 id="title-4">Login</h2>;
const App = () => (
  <BrowserRouter>
    <Route exact path="/" component={Home} />
    <Route path="/login" component={Login} />
    <PrivateRoute path="/protected" component={Protected} />
  </BrowserRouter>
);

六、React页面跳转传值

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

// 通过URL参数传递参数
import { BrowserRouter, Route, Link } from 'react-router-dom';
const Home = () => <h2 id="title-5">Home</h2>;
const User = ({ match }) => <h2 id="title-6">Hello, {match.params.name} !</h2>; // 参数名用:name表示
const App = () => (
  <BrowserRouter>
    <ul>
      <li><Link to="/">Home</Link></li>
      <li><Link to="/user/john">User - John</Link></li>
      <li><Link to="/user/bob">User - Bob</Link></li>
    </ul>
    <Route exact path="/" component={Home} />
    <Route path="/user/:name" component={User} />
  </BrowserRouter>
);
// 通过组件属性传递参数
import { BrowserRouter, Route, Link } from 'react-router-dom';
const Home = () => <h2 id="title-7">Home</h2>;
const User = ({ name }) => <h2 id="title-8">Hello, {name} !</h2>; // 通过属性传递
const App = () => (
  <BrowserRouter>
    <ul>
      <li><Link to="/">Home</Link></li>
      <li><Link to={{ pathname: '/user', state: { name: 'John' } }}>User - John</Link></li>
      <li><Link to={{ pathname: '/user', state: { name: 'Bob' } }}>User - Bob</Link></li>
    </ul>
    <Route exact path="/" component={Home} />
    <Route path="/user" render={(props) => <User name={props.location.state.name} />} />
  </BrowserRouter>
);

七、React页面跳转传参

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

import { Link } from 'react-router-dom';
const Home = () => <h2 id="title-9">Home</h2>;
const App = () => (
  <div>
    <h1>App</h1>
    <ul>
      <li><Link to={{ pathname: '/about', search: '?sort=name' }}>About（按名称排序）</Link></li>
      <li><Link to={{ pathname: '/about', search: '?sort=date' }}>About（按日期排序）</Link></li>
    </ul>
    <Route exact path="/" component={Home} />
    <Route path="/about" component={About} />
  </div>
);

八、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 = () => (
  <BrowserRouter>
    <div>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
      </ul>
      <hr />
      <Suspense fallback={<div>Loading...</div>}>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </Suspense>
    </div>
  </BrowserRouter>
);
推荐文章