一、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库提供的
{`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进行页面跳转时,需要注意页面刷新的机制。
以
为了避免这个问题,可以配置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...
}>