从零开始的野路子React/Node（2）路由与页面跳转
这两天主要摸索了一下React的路由做法，网上看了一些资料，但总觉得比较零散，所以自己稍微总结一下，好让自己明白一些。
首先，对于一个稍微复杂一点的网站来说，一般都有多个页面，通常通过点击链接或者其他操作，我们可以在页面间跳转。而跳转的过程基本上就通过路由来实现。
React的路由主要依靠react-router-dom这个库（当然，其他就算有我也不知道……）来实现。下面我们来看个简单的例子：
1、准备各个页面
我们假设我们需要三个页面（Home, Overview, Chapters），都在components目录下，各自的内容也非常简单。
Home是个主页，我们放一些欢迎信息：
import React from 'react'; export default function Home() { return ( <div> <h1>欢迎光临，随意挑选</h1> </div> ); }
Overview是个概览页面：
import React from 'react'; export default function Overview() { return ( <div> <h1>梗概</h1> <div>话说天下大势，分久必合，合久必分。</div> </div> ); }
Chapters是个章节内容页面，看起来比较复杂，其实只是根据ChapDict的内容罗列第x章，以及对应的标题：
import React from 'react'; const ChapDict = { 1:'宴桃园豪杰三结义 斩黄巾英雄首立功', 2:'张翼德怒鞭督邮 何国舅谋诛宦竖', 3:'议温明董卓叱丁原 馈金珠李肃说吕布', 4:'废汉帝陈留践位 谋董贼孟德献刀', 5:'未完待续'}; export default function Chapters () { var chapnum = Object.keys(ChapDict) return ( <div> { chapnum.map( (item, idx) => ( <div> <h2>第{ item }章</h2> <p>{ ChapDict[item] }</p> </div> ) ) } </div> ); };
接下来，我们把Home组件放到主文件App.js中，毕竟这是我们启动后第一眼就会看到的页面：
import React from 'react'; import './App.css'; import Home from './components/Home'; function App() { return ( <div> <Home/> </div> ); } export default App;
通过npm install后npm start启动一下，我们可以看到一个极为粗放的主页：
2、添加路由
接下来，我们需要加入路由元素了。我们把三个页面组件都导入进来，并且从react-router-dom中导入BrowserRouter（名字太长，所以之后用Router代替）和Route。
现在App.js变成了：
import React from 'react'; import './App.css'; import { BrowserRouter as Router, Route } from 'react-router-dom'; import Home from './components/Home'; import Overview from './components/Overview'; import Chapters from './components/Chapters'; function App() { return ( <div> <Router> <Route path='/' component={ Home }/> <Route path='/overview' component={ Overview }/> <Route path='/chapters' component={ Chapters }/> </Router> </div> ); } export default App;
每一条路由设置，我们都用Route来设定之，它有两个参数，分别是对应的URL地址（path）和对应调用的组件（component）。我们将其依次设定。最后把这几条路由都放在Router里面就行了。
现在我们的主页看上去并没有什么变化，但是我们输入不同的URL已经能看到不同的内容了。但是有个问题是主页的内容为什么一直会显示呢？
因为路由会逐条匹配，匹配到有对应的内容显示并继续向下再匹配。而我们的主页“/”永远会第一个被匹配到，所以永远会显示。解决的方法是：
（1）path前加上exact，这样一来，一定要URL完全匹配为“/”才会显示主页，否则不会显示；
（2）再加上Switch，Switch的作用是一旦匹配到一条就不再继续向下匹配了。
所以我们把App.js改成：
import React from 'react'; import './App.css'; import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import Home from './components/Home'; import Overview from './components/Overview'; import Chapters from './components/Chapters'; function App() { return ( <div> <Router> <Switch> <Route exact path='/' component={ Home }/> <Route path='/overview' component={ Overview }/> <Route path='/chapters' component={ Chapters }/> </Switch> </Router> </div> ); } export default App;
现在一切都正常多了：
然而，还有个问题就是，如果用户输入了一个我们没有定义过的网址，比如http://localhost:3000/blahblah页面就没法正常显示，怎么办呢？我们可以通过Redirect把这些乱七八糟的输入都重定向到主页（自动跳回主页）。注意Redirect一定要放在最后！设定完from和to就大功告成了：
import React from 'react'; import './App.css'; import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom'; import Home from './components/Home'; import Overview from './components/Overview'; import Chapters from './components/Chapters'; function App() { return ( <div> <Router> <Switch> <Route exact path='/' component={ Home }/> <Route path='/overview' component={ Overview }/> <Route path='/chapters' component={ Chapters }/> <Redirect from='/*' to='/'/> </Switch> </Router> </div> ); } export default App;
3、来个导航栏吧
到现在为止，我们已经可以通过输入不同的网址来访问不同的页面，但我们还没有做页面跳转。不如我们加个导航栏吧。我们在components目录下新建一个Navi组件：
import React from 'react'; import { Link } from 'react-router-dom'; export default function Navi() { return ( <div> <Link to='/'> <p>首页</p> </Link> <Link to='/overview'> <p>梗概</p> </Link> <Link to='/chapters'> <p>章节</p> </Link> </div> ); }
Navi的内容很简单，仅仅是三个段落：首页、梗概、章节而已，但是每个段落都被包含在Link当中，Link的作用就是跳转，我们设定了参数to就是需要跳转到的页面。接下来，我们需要把导航栏也加入到App.js中：
import React from 'react'; import './App.css'; import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom'; import Navi from './components/Navi'; import Home from './components/Home'; import Overview from './components/Overview'; import Chapters from './components/Chapters'; function App() { return ( <div> <Router> <Navi/> <Switch> <Route exact path='/' component={ Home }/> <Route path='/overview' component={ Overview }/> <Route path='/chapters' component={ Chapters }/> <Redirect from='/*' to='/'/> </Switch> </Router> </div> ); } export default App;
由于导航栏每个页面都会出现，所以不需要添加路由，我们把它放在最前面，Switch之外就行了。再来看看：
我们点击对应的部分就可以跳转到对应了页面啦~
4、再增加点难度？
以上都是静态的URL，要不我们试试动态的？比如每个章节都能点击，然后可以进入到那个章节的页面怎么样？
我们先在components目录下做个Chap组件，这跟之前初体验中提到的方法一样，非常简单：
import React from 'react'; export default function Chap (props) { return ( <div> <h2>第{ props.chap }章</h2> <p>{ props.title }</p> </div> ); }
props的chap属性决定显示第几章，而title属性决定显示什么标题。
我们随便加个 <Chap chap='2' title='月明星稀，乌鹊南飞'/> 试试：
红框部分就是Chap组件显示的内容。然后我们再加入一条路由通往Chap组件，这里注意Chapters对应的path前要加上exact防止提前被匹配掉：
import React from 'react'; import './App.css'; import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom'; import Navi from './components/Navi'; import Home from './components/Home'; import Overview from './components/Overview'; import Chapters from './components/Chapters'; import Chap from './components/Chap'; function App() { return ( <div> <Router> <Navi/> <Switch> <Route exact path='/' component={ Home }/> <Route path='/overview' component={ Overview }/> <Route exact path='/chapters' component={ Chapters }/> <Route path='/chapters/:chap' component={ Chap }/> <Redirect from='/*' to='/'/> </Switch> </Router> </div> ); } export default App;
好了，现在我们随便在”/chapters/”后面输个数字都会进入一个新的页面，但问题是还没有内容传入进去：
这里我们要完成两个工作，一个是在Chapters中用Link做链接跳转。另一个则是通过Link传递对应的内容到Chap组件中进行显示。我们修改一下Chapters组件，加入Link，通过占位符来跳转到动态的地址：
import React from 'react'; import { Link } from 'react-router-dom'; const ChapDict = { 1:'宴桃园豪杰三结义 斩黄巾英雄首立功', 2:'张翼德怒鞭督邮 何国舅谋诛宦竖', 3:'议温明董卓叱丁原 馈金珠李肃说吕布', 4:'废汉帝陈留践位 谋董贼孟德献刀', 5:'未完待续'}; export default function Chapters () { var chapnum = Object.keys(ChapDict) return ( <div> { chapnum.map( (item, idx) => ( <div> <Link to={ `/chapters/${ item }` }> <h2>第{ item }章</h2> </Link> <p>{ ChapDict[item] }</p> </div> ) ) } </div> ); };
现在每个“第x章”上都有了链接，点击即可跳转到对应的页面” http://localhost:3000/chapters/x”，但依然没有内容。
我们可以先修改一下Chap组件，我们把props.chap改为props.match.params.chap，这样可以匹配URL中的通配网址（还记得我们在Route中指定了Chap组件的path='/chapters/:chap'吗），这样chap的值就能被传入了：
第x章有了，那么对应的标题呢？难道要复制一个ChapDict过来匹配吗？这样修改起来很不方便，而且不够偷懒。
办法还是有的，我们分别修改一下Chapters组件里Link的参数，以及Chap组件中title的获取方式就行。
import React from 'react'; import { Link } from 'react-router-dom'; const ChapDict = { 1:'宴桃园豪杰三结义 斩黄巾英雄首立功', 2:'张翼德怒鞭督邮 何国舅谋诛宦竖', 3:'议温明董卓叱丁原 馈金珠李肃说吕布', 4:'废汉帝陈留践位 谋董贼孟德献刀', 5:'未完待续'}; export default function Chapters () { var chapnum = Object.keys(ChapDict) return ( <div> { chapnum.map( (item, idx) => ( <div> <Link to={{ pathname:`/chapters/${ item }`, query:{ title:ChapDict[item] } }}> <h2>第{ item }章</h2> </Link> <p>{ ChapDict[item] }</p> </div> ) ) } </div> ); };
对于Chapters组件，我们修改了Link的to参数，它的内容变成了一个Object（类似python的dict），pathname即跳转的URL地址，而query则可以放置我们想要传递的内容。这里我们把title的内容传进去。
再修改一下Chap组件：
import React from 'react'; export default function Chap (props) { let title = props.location.query !== undefined ? props.location.query.title : '未完待续' return ( <div> <h2>第{ props.match.params.chap }章</h2> <p>{ title }</p> </div> ); }
我们通过props.location.query.title（而不是原来的props.title）来获取title的内容。
需要注意的是，这里建立了一个临时变量title，并通过一个条件判断来获取值，这样做的原因是因为我们的ChapDict只有五个章节的内容，也就是说我们章节的URL只能支持到” http://localhost:3000/chapters/5”，如果用户输入一个” http://localhost:3000/chapters/36”怎么办？直接使用props.location.query.title的话会因为props.location.query是undefined而报错。因此我们加了一步条件判断，如果query是undefined的话，我们的标题就是“未完待续”。
现在所有的内容都妥了~
代码见：
https://github.com/SilenceGTX/react_basic_route
