react路由React-Router学习教程(二)-- 路由嵌套

责编:menVScode 2017-07-02 0:28 阅读(1557)

react路由嵌套就要使用到match对象,match对象包含有关如何信息<Route path>相匹配的URL。match对象属性如下:

        params - (对象)从与路径的动态段相对应的URL分析密钥/值对

        isExact- (布尔值)为true时完全匹配整个URL(没有尾随字符)

        path - (string)用于匹配的路径模式,指的是<Route>的路劲模式。

        url - (string)URL的匹配部分,指的是<Link>的路劲模式。

您可以match在各个地方访问对象:

        Route component作为this.props.match

        Route render作为({ match }) => ()

        Route children作为({ match }) => ()

        widthRouter作为this.props.match

        matchPath作为返回值

有部分知识点在此篇文章react路由React-Router学习教程(一)-- http://menvscode.com/detail/5957597d41d2a6025bbe0445

举个小例子

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>
					<li>
						<Link to='/topics'>Topics</Link>
					</li>
				</ul>
				<hr/>
				<Route exact path='/' component={Home} />
				<Route exact path='/about' component={About} />
				<Route path='/topics' component={Topics} />
			</div>
		</BrowserRouter>
	)
}

const Home = () =>{
	return(<div><h2>Home</h2></div>)
}
const About = () =>{
	return(<div><h2>About</h2></div>)
}
//路由的嵌套
const Topics = ({match}) =>{
	console.log(match)
	return(
		<div>
			<h2>Topics</h2>
			<ul>
				<li>
					<Link to={`${match.url}/men`}>men</Link>
				</li>
				<li>
					<Link to={`${match.url}/vs`}>vs</Link>
				</li>
				<li>
					<Link to={`${match.url}/code`}>code</Link>
				</li>
			</ul>
			<Route path={`${match.url}/:item`} component={Topic} />
			<Route exact path={match.url} render={() => (<h3>请选择一个Topic</h3>)} />
			{/*
				{match.url}路劲的完全匹配时,默认显示的内容。
				用到了Route的第三种渲染方式:<Route render>。
			*/}
		</div>
	)
}
const Topic = ({match,location,history}) =>{
console.log(match);         console.log(location);         console.log(history); return <h3>{match.params.item}</h3> } export default App;

<Route>组件三种<Route component>、<Route render>、<Route children>渲染方式,他们共同有三个路由属性:match,location,history。

查看Topics组件中console.log(match)的结果:

QQ截图20170701233802

查看Topic组件中console.log(match)的结果:

QQ截图20170702010402

查看Topic组件中console.log(location)的结果:

Object {pathname: "/topics/men", search: "", hash: "", state: undefined, key: "pz5z3j"}

查看Topic组件中console.log(history)的结果:浏览器的一些历史记录,前进,后退...

111

案例效果图:

QQ截图20170702012047

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

邮箱快速注册

忘记密码