这次给大家带来React路由管理与React Router使用详解，React路由管理与React Router使用的注意事项有哪些，下面就是实战案例，一起来看一下。
React Router是做什么的呢，官方的介绍是：
A complete routing library for React，keeps your UI in sync with the URL. It has a simple API with powerful features like lazy code loading, dynamic route matching, and location transition handling built right in. Make the URL your first thought, not an after-thought.
大意即：让UI组件和URL保持同步,通过简单的API即可实现强大的特性如：代码懒加载，动态路由匹配，路径过渡处理等。
下面是一些React Router的用法：
一 简单渲染Route
有一点需要牢记于心，Router 是作为一个React组件，可以进行渲染。
// ...import { Router, Route, hashHistory } from 'react-router'render(( ), document.getElementById('app'))
登录后复制
这里使用了hashHistory – 它管理路由历史与URL的哈希部分。
添加更多的路由，并指定它们对应的组件
import About from './modules/About'import Repos from './modules/Repos'render(( ), document.getElementById('app'))
登录后复制
二 Link
// modules/App.jsimport React from 'react'import { Link } from 'react-router'export default React.createClass({ render() { return (
React Router Tutorial
) }})
登录后复制
这里使用了Link 组件，它可以渲染出链接并使用 to 属性指向相应的路由。
三 嵌套路由
如果我们想添加一个导航栏，需要存在于每个页面上。如果没有路由器，我们就需要封装一个一个nav组件，并在每一个页面组件都引用和渲染。随着应用程序的增长代码会显得很冗余。React-router则提供了另一种方式来嵌套共享UI组件。
实际上，我们的app都是一系列嵌套的盒子，对应的url也能够说明这种嵌套关系：
{/* url / */} {/* url /repos */} {/* url /repos/123 */}
登录后复制
因此，可以通过把子组件嵌套到 公共组件 App上使得 App组件上的 导航栏 Nav 等公共部分能够共享：
// index.js// ...render(( {/* 注意这里把两个子组件放在Route里嵌套在了App的Route里/} ), document.getElementById('app'))
登录后复制
接下来，在App中将children渲染出来：
// modules/App.js// ... render() { return (
React Router Tutorial
{/* 注意这里将子组件渲染出来 */} {this.props.children} ) }// ...
登录后复制
四 有效链接
Link组件和a标签的不同点之一就在于Link可以知道其指向的路径是否是一个有效的路由。
登录后复制
可以使用 activeStyle 指定有效链接的样式，也可以使用activeClassName指定有效链接的样式类。
大多数时候，我们并不需要知道链接是否有效，但在导航中这个特性则十分重要。比如：可以在导航栏中只显示合法的路由链接。
// modules/NavLink.jsimport React from 'react'import { Link } from 'react-router'export default React.createClass({ render() { return }})
登录后复制
// modules/App.jsimport NavLink from './NavLink'// ...
登录后复制
可以在NavLink中指定只有 .active 的链接才显示，这样如果路由无效，则该链接就不会出现在导航栏中了。
五 URL参数
考虑下面的url：
/repos/reactjs/react-router
/repos/facebook/react
他们可能对应的是这种形式：
/repos/:userName/:repoName
：后面是可变的参数
url中的可变参数可以通过 this.props.params[paramsName] 获取到：
// modules/Repo.jsimport React from 'react'export default React.createClass({ render() { return ( {/* 注意这里通过this.props.params.repoName 获取到url中的repoName参数的值 */}
{this.props.params.repoName}
) }})
登录后复制
// index.js// ...// import Repoimport Repo from './modules/Repo'render(( {/* 注意这里的路径 带了 ：参数 */} ), document.getElementById('app'))
登录后复制
接下来访问 /repos/reactjs/react-router 和 /repos/facebook/react 就会看到不同的内容了。
六 默认路由
// index.jsimport { Router, Route, hashHistory, IndexRoute } from 'react-router'// and the Home componentimport Home from './modules/Home'// ...render(( {/* 注意这里* /} ), document.getElementById('app'))
登录后复制
这里添加了IndexRoute来指定默认的路径 / 所对应的组件。注意它没有path属性值。
同理也有 默认链接组件 IndexLink。、
七 使用Browser History
前面的例子一直使用的是hashHistory，因为它一直可以运行，但更好的方式是使用Browser History，它可以不依赖哈希端口 （#）。
首先需要改 index.js:
// ...// bring in `browserHistory` instead of `hashHistory`import { Router, Route, browserHistory, IndexRoute } from 'react-router'render(({/* 注意这里 */} {/* ... */} ), document.getElementById('app'))
登录后复制
其次需要 修改webpack的本地服务配置，打开 package.json 添加 –history-api-fallback ：
复制代码 代码如下:
“start”: “webpack-dev-server –inline –content-base . –history-api-fallback”
最后需要在 index.html中 将文件的路径改为相对路径：
登录后复制
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
如何使用AngularJS模态框模板ngDialog
使用Vue.js下载方式案例详解
以上就是React路由管理与React Router使用详解的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2753641.html
