react路由React-Router学习教程(一)

责编:menVScode 2017-07-01 16:12 阅读(1030)

        传统开发中的 路由,是由服务端根据不同的用户请求地址 URL,返回不同内容的页面,而前端路由则将这些任务通过 JS 在浏览器端完成,SPA 应用 则是前端路由的最佳适用场景,因为它结构简单,只需更新页面部分显示内容 也不必每次都从服务端获取内容。

        react-router 是官方指定和维护的 React 路由库,它通过管理 URL,实现组件间切换,和状态 (state) 的变化。

        首先安装react-router-dom包;react-router和react-router-dom区别是:react-router-dom只是4.0版本从react-router分离出来的部分,可以不安装react-router。

npm install react-router-dom --save

        下图是react-router-dom包文件中,常用的路由组件。

QQ截图20170701160010

1、BrowserRouter:该组件Route的一个容器,路由规则使用<Route/>进行定义。注意:<BrowserRouter></BrowserRouter>内只能有一个一级子元素,存在多个就会报错。

2、Route:该组件可以定义多个路由,Route的属性如下:

        path:path值与Link组件中to属性值相对应。

        compenent:要渲染的内容(组件)。渲染方式有三种<Route component>、<Route render>、<Route children>,但大多数时候你会使用component

        exact: path的值location.pathname的值完全匹配匹配地址(path)与url地址(Link组件的to)完全相同,没有尾随字符)

<Route exact path="/about" component={About}/>
 path location.pathname 布尔值是否匹配 
 /about  /about/1 true no
 /about  /about/2 false yes

        strict:匹配地址(path)与url地址(Link组件的to)完全相同,可以有尾随字符。

<Route strict path="/about/" component={About}/>
 path location.pathname 是否匹配
 /about/ /aboutno 
 /about//about/1 yes 
 /about// about/2    yes 

        注意:exact、strict是按照 path 的值而不是按照 to 的值进行匹配。

        <Route path='/topics/:id' component={Topics} />//其中id的值是一个可变动态的参数

3、Link:该组件几乎等同于<a/>标签,是应用中较常用的组件。Link的属性如下:

        to:字符串,表示要链接到的路径名或位置,<Link to="/courses"/>,反映在地址栏。

        to:对象,一般用在表单居多

<Link to={{ 
     pathname: '/courses', //pathname与设置字符串方式一样的
     search: '?sort=name', //参数
     hash: '#the-hash', //哈希值
     state: { fromDashboard: true } 
}}/>

        replace: 布尔值,当为true的时候,点击链接将替换当前条目,而不是添加新的条目。

        例子:

import React from 'react';
import {BrowserRouter,Route,Link} from 'react-router-dom';
const App = () =>{
	return(
		<BrowserRouter>
			<div>
				<ul>
					<li>
						<Link to='/'>Home</Link>
					</li>
					<li>
						<Link to='/about'>About</Link>
					</li>
				</ul>
				<hr/>
			    {/*
				{match.url}路劲的完全匹配时,默认显示的内容。
				用到了Route的第三种渲染方式:<Route render>。
			    */}
				<Route exact path='/' component={Home} />
				<Route exact path='/about' component={About} />
			</div>
		</BrowserRouter>
	)
}
const Home = () =>{
	return(<div><h2>Home</h2></div>)
}
const About = () =>{
	return(<div><h2>About</h2></div>)
}
export default App;

        例子效果图,点击'Home'、'About'下面显示对应的内容

QQ截图20170702011816

4、BrowserRouterHashRouterMemoryRouter封装好的三个Router组件,他们之间的区别

        BrowserRouter:一个包含HTML5的历史Api(pushState, replaceState and the popstate event)的Router

        HashRouter:一个可以使用URL哈希值的Router,可能存在兼容性的问题(IE)

        MemoryRouter:可以将URL的历史存放在内存中,一般用于测试

5、NavLink一个特殊的版本,<Link>当它与当前的URL匹配时,会将渲染的元素添加样式属性。该组件的属性如下:

        activeClassName:string,当被选中以类名方式给予其样式。

<NavLink to="/about" activeClassName="selected"> About </NavLink>

        activeStyle:object,以行内样式的方式,不建议。

<NavLink
    to="/about"
    activeStyle={{
      fontWeight: 'bold',
      color: 'red'
   }}
>About</NavLink>

        exact:布尔值

        strict:布尔值

6、Redirect: 重定向

        to:string/object,跟Link中属性相似。

前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码