作为一个单页面应用，使用react框架必然需要用上react-router来实现页面跳转。React Router 4.0同样遵循着React的设计理念，即组件化的思想。那么使用react-router进行route配置与express中的route配置有什么关联呢。
一、先了解下RR4的一些新属性/特点。
- React Router被拆分成三个包：react-router,react-router-dom和react-router-native。react-router提供核心的路由组件与函数。其余两个则提供运行环境（即浏览器与react-native）所需的特定组件。在引用的时候，只需要引入react-router-dom或react-router-native即可
- 4.0以上，不再主张集中式路由了，路由规则可自由位于布局和 UI 本身之间，但其必须包含在路由类型内。
<BrowserRouter history={browserHistory} basename="/app">
<div className="body-content">
<div>测试</div>
<Form />
<Switch>
<Route exact path="/" render={() => pathCom()} />
<Route path="/index" component={Index} />
<Route path="/userLogin" component={UserLogin} />
</Switch>
</div>
</BrowserRouter>
- 路由类型主要有三种BrowserRouter/HashRouter/MemoryRouter，其中BrowserRouter需要服务器配合渲染使用，否则刷新出现404，而且其基于新版HTML5中的history属性来实现的，在兼容性上需要考虑；HashRouter比较适合静态页面或者兼容旧版浏览器。
- <Route>的作用是当页面的访问地址与Route上配置的path匹配时，就渲染对应的组件。<Route>自带三种渲染方法（component，render:func，children:func）和三个属性（match，location，history），可自行根据需求使用不同的渲染方法。
- Switch：使用Switch来启用排他路由，只会渲染出第一个与当前访问地址匹配的 <Route> 或 <Redirect>。
- exact: v4版本默认路由规则是包含性，可同时渲染多个匹配的路由，如/index和/index/:id，但一旦路由使用了exact，则只会匹配完全正确的路径
二、传参
- 类似id传值，设置路由变量
<li><Link to="/index/123">首页</Link></li>
<Route exact path="/index/:id" component={Index} />
// 这样就可以直接在Index组件中获取参数
this.props.match.params.id
- 多个传参(后期使用redux，可将数据储存在state中)
const location = {
pathname: "/index/123", // 当前路径，即 Link 中的 to 属性
search: "?name=默默", // search
hash, // hash
state: {age: 26}, // state 对象
action, // location 类型，在点击 Link 时为 PUSH，浏览器前进后退时为 POP，调用 replaceState 方法时为 REPLACE
key, // 用于操作 sessionStorage 存取 state 对象
};
<li><Link to={location}>Home</Link></li>
<Route exact path="/index/:id" component={Index} />
// 获取参数对象
this.props.location
三、Link和NavLink区别
- Link --> 就相当于a标签
- NavLink --> 就相当于导航中的a标签
值得注意的是，Link无法激活activeClassName和activeStyle，NavLink才可以，而且对其重复点击，会导致react-router重复调用H5的history.pushState方法，致使浏览器插入多条记录，后退不能一次性返回上一个页面。(哪位高手知道如何解决的，麻烦指点下)。
四、react-router和express中的router搭配
专指路由类型为BrowserRouter的，如果你用的是HashRouter，可以直接跳过该处。
由于是单页面应用，如果只单纯的设计react静态路由，当你刷新后，浏览器会先向服务器端发出请求，服务器端根据url，匹配对应的路由，发现文件不存在则会返回响应404。
有两种方法处理：
- 直接修改express路由配置，如：
// 在react-router上设定特定的根目录
<BrowserRouter history={browserHistory} basename="/app">
// 在app.js
app.use('/app', index);
// 在路由index.js上
router.get('/', function(req, res, next) {
res.redirect('/app/');
});
router.get('/*', function(req, res, next) {
res.render('index', { title: 'Express' });
});
- 直接使用中间件connect-history-api-fallback，但遗憾的是，我尝试了几回都实现不了，就抛弃该用法了。
如果你对路由有过一定得研究，路由的配置还是相对简单的。React框架的route配置原理其实跟服务器端的配置原理基本一样，其实现的流程也是类似的。
网友评论