安装命令: NPM install react-router
react-router 路由提供了一些 router 的核心 API, 包括 Router, Route, Switch 等, 但是它没有提供 dom 操作进行跳转的 API.
React-Router 提供了两个组件: Router 和 Route. 下面看最简单的例子:
src/Routes.JS
- import React from 'react'
- import {Router,Route,browserHistory} from 'react-router'
- import Home from './pages/Home.js'
- import About from './pages/About.js'
- import NotFound from './pages/NotFound.js'
- const history = browserHistory;
- const Routes = () =>(
- <Router history = {browserHistory}>
- <Route path = "home" component = {home}>
- <Route path = "about" component = {About}>
- <Route path = "*" component = {NotFound}>
- </Router>
- );
- export default Routes;
Routes.JS 文件返回一个组件, 该组件输出一个 Router 组件实例, 路由及其规则都封装在里面, Route 组件内的 path 和 component 把路径和组件对应起来.
路由链接:
html 的链接被点击时会发生默认跳转, 这不符合单页面应用的要求, 所以 React-Router 提供了一个 < Link > 组件来支持路由链接.
1.<link > 组件产生 HTML 链接.
2. 对该链接的点击不会引发跳转, 而是把目标路径发送给 Router, 让 Router 依据关联显示对应的组件.
3.<Link > 组件的 to 指向一个路径, 对应的路径在 Router 中应该有定义.
- import React from 'react'
- import {Link} from 'react-router'
- const view = ()=>{
- <div>
- <ul>
- <li><Link to="/home">Home</Link></li>
- <li><Link to="/about">About</Link></li>
- </ul>
- </div>
- };
嵌套:
Route 提供了嵌套功能. 路由的嵌套和组件层级的显示是对应的. 当我们触发了子路由的跳转时, 父层路由显示的东西可以依然保留在页面上, 只有子层路由对应的组件发生变更.
比如在 src/pages/App.JS 中定义组件 App:
- import React from 'react'
- import {view as TopMenu} from '../components/TopMenu'
- const App = ({children}) =>{
- return (
- <div>
- <TopMenu />
- <div>{children}</div>
- </div>
- )
- }
- export default App
上面代码中 children 是 App 的子组件. 这是 React 中原生的特性.
React-Router 中路由嵌套需要组件和 Route 的双边设置:
在组件中将 children 获得的子组件在恰当位置渲染;
在 Route 中 , 则是设置嵌套的 < Route>
- const Routes = ()=>(
- <Router history = {browserHistory}>
- <Route path = "/" component = {App}>
- <Route path = "hone" component={home} />
- <Route path = "hone" component={home} />
- <Route path = "hone" component={home} />
- </Route>
- </Route>
- );
本文来自 React 答疑 https://www.html.cn/qa/react/ 栏目, 欢迎学习!
来源: http://www.css88.com/qa/react/15071.html