第07节、路由：404设置和跳转设置

项目中都要设置 404 页面，也就是当找不到这个路由时跳转的页面。React 中的404主要靠 Switch 组件来完成。

Switch组件的使用

在index.js页面中，在引入路由的地方，我们加入Switch的引入。

1	import { BrowserRouter as Router , Route , Switch } from 'react-router-dom' ;

编写404页面

现在需要一个统一的404页面，这里在app文件夹下新建一个error.js文件。然后封装成组件，方便路由进行调用。

error.js

1 2 3 4 5 6 7 8

import React from 'react' ; export default class error extends React . Component {      render ( ) {          return (              < h2 > 404 < / h2 >          ) ;      } }

在nav.js页面中加入一个不存在的链接NavLink，为的时让它在错误的时候能自动跳转到404页面上。

nav.js

1	< NavLink to = '/react' activeClassName = 'active' > 404 < / NavLink >

下面该主角Switch上场了，改写我们的index.js页面，改为下面的样子。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

import React from 'react' ; import ReactDOM from 'react-dom' ; import { BrowserRouter as Router , Route , Switch } from 'react-router-dom' ; import Jspang from './jspang' ; import Jspangb from './jspangb' ; import Jspangc from './jspangc' ; import Nav from './nav' ; import Error from './error' ;   ReactDOM . render (           < Router >          < div >          < Nav / >              < Switch >                  < Route   exact   path = "/"    component = { Jscomponent } / >                  < Route   path = "/Jscomponentb" component = { Jscomponentb } / >                  < Route   path = "/Jscomponentc" component = { Jscomponentc } / >                  < Route   component = { Error } / >              < / Switch >                       < / div >      < / Router > ,      document . getElementById ( "app" ) ) ;

然后到浏览器中进行预览，你会看到当点击404链接时，因为链接地址是我们瞎写的，但是它跳到了error.js页面。

注意顺序：错误页面应该在最后面。

Redirect组件使用

有时候我们开发中希望在程序中根据业务逻辑进行跳转，或者一个链接点击后直接跳转到其它链接。这时候可以使用Redirect组件解决。

引入Redirect组件

在index.js中引入Redirect组件

1	import { BrowserRouter as Router , Route , Switch , Redirect } from 'react-router-dom' ;

加入跳转链接

在nav.js里加入一个准备跳转的链接，代码如下。

1	< NavLink to = '/redirect' activeClassName = 'active' > Redirect < / NavLink >

这时候点击这个链接，会跳转到404页面，但是我们希望跳转到jspangb页面。

加入<Redirect>标签

在index.js文件中，加入<Redirect>标签。

1	< Redirect from = "/redirect" to = "/Jscomponentb" / >

from：表示来自于什么链接，也就是当链接是redirect时，我们触发跳转命令。

to：表示要跳转到的链接，这里是跳转到Jscomponentb的组件中。

写完后你可以在浏览器中查看这个跳转效果了。

总结:设置404和跳转都要先加入Switch的支持，在制作404时一定记得要把404的Route设置到所有路由的后边。跳转时使用Redirect标签，这个很容易实现。