内容简介:使用BrowserRouter时,一般还需要对服务器进行配置,让服务器能正确处理所有可能的URL.例如,当浏览器发送(1)当使用BrowserRouter时,path用来描述这个Route匹配的URL的pathname(2)当使用HashRouter时,path用来描述这个Route匹配的URL的hash.
React Router v4是对React Router的一次彻底重构,采用动态路由,遵循React中一切皆组件的思想,每一个Route(路由)都是一个普通的React组件。
使用BrowserRouter时,一般还需要对服务器进行配置,让服务器能正确处理所有可能的URL.例如,当浏览器发送 http://react.com/some/path 和 http://react.com/some/path2两... ,服务器能够返回正确的HTML页面(也就是单页面应用中唯一的html页面).使用HashRouter则不存在这个问题,因为hash部分的内容会被服务器自动忽略,真正有效的是hash前面的部分,而对于单页面应用来说,这部分内容是固定的。
路由的配置
1.path
(1)当使用BrowserRouter时,path用来描述这个Route匹配的URL的pathname
(2)当使用HashRouter时,path用来描述这个Route匹配的URL的hash.
2.match
(1) params: Route的path可以包含参数,例如:<Route path='/foo/:id'> 包含一个参数id。params就是用于从匹配的URL中解析出path中的参数,例如:当URL="http://react.com/foo/1时,params={id:1}。
(2) isExact: 是一个布尔值,当URL完全匹配时,值为true;当URL部分匹配时,值为false.例如:当path="/foo",URL="http://react.com/foo"时,是完全匹配;当URL="http://react.com/foo/1时,是部分匹配。
(3) path: Route的path属性,构建嵌套路由时会使用到。
(4) url: URL的匹配部分。
3.Route渲染组件的方式
(1)component
component的值是一个组件,当URL和Route匹配时,component属性定义的组件就会被渲染。
<Route path='/foo' component={FOO}>
当URL="http://react.com/foo"时,Foo组件会被渲染。
(2)render
render的值是一个函数,这个函数返回一个React元素,这个函数返回一个React元素。这种方式可以很方便的为待渲染的组件传递额外的属性。
例如:
<Route path='/foo' render={(props)=>(
<Foo {...props} data={extraProps} />
)}>
Foo组件接收了一个额外的data属性。
(3)children children的值也是一个函数,函数返回要渲染的React元素。与之前两种方式不同的是,无论是否匹配成功,children返回的组件都将会被渲染。但是当匹配不成功时,match属性为null。例如:
<Route path='/foo' children={(props)=>(
<div className={props.match?'active':''}> <Foo /> </div>
)} />
如果Route匹配当前URL,待渲染元素的根节点div的class将被设置成active。
4.Switch和exact
当URL和多个Route匹配时,这些Route都会执行渲染操作。如果只想让第一个匹配的Router渲染,那么可以把这些Route包到一个Switch组件中。
如果想让URL和Route完全匹配时,Route才渲染,那么可以使用Route的exact属性。Switch和exact常常联合使用,用于应用首页的导航。
例如:
<Router>
<Switch> <Route exact path='/' component={Home} /> <Route path='/posts' component={Posts} /> <Route path='/:user' component={User} /> </Switch>
</Router>
如果不使用Switch,当URL的pathname为"/posts"时,<Route path='/posts'/>和<Route path='/:user' />都会被匹配。
如果不使用exact,"/" "/posts" "/user1"等几乎所有URL都会匹配第一个Route,又因为Switch的存在,后面的两个Route永远也不会被匹配。使用exact,保证只有当URL的pathname为"/"时,第一个Route才会被匹配。
5.嵌套路由
嵌套路由是指在Route渲染的组件内部定义新的Route.例如:
const Posts = ({match}) => {
return( <div> {/*这里match.url等于/posts*/} <Route path={`${match.url}/:id`} component={PostDetail} /> <Route exact path={match.url} component={PostList} /> </div> )
}
当URL的pathname为"/posts/react"时,PostDetail组件会被渲染;当URL的pathname为"/posts"时,PostList组件会被渲染。Route的嵌套使用让应用可以更加灵活的使用路由。
6.链接
Link是React Router提供的链接组件,一个Link组件定义了当点击该Link时,页面应该如何路由:
例如:
const Navigation = () => (
<header> <nav> <ul> <li><Link to='/'>Home</Link></li> <li><Link to='/posts'>Posts</Link></li> </ul> </nav> </header>
)
Link使用to属性声明要导航到URL地址。to可以是string或object类型,当to为object类型时,可以包含pathname、search、hash、state、四个属性,例如:
<Link to={{
pathname:'/posts', search:'?sort=name', hash:'#the-hash", state:{formHome:true}
}}/>
除了使用Link外,我们还可以使用history对象手动实现导航,history中最常用的方法是push(path,[state])和replace(path,[state]),push会向浏览器历史记录中新增一条记录,replace会用新纪录替换当前纪录,例如:
history.push('/posts')
history.replace('/posts')
import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
function BasicExample() {
return (
<Router> <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 path="/about" component={About} /> <Route path="/topics" component={Topics} /> </div> </Router>
);
}
function Home() {
return (
<div> <h2>Home</h2> </div>
);
}
function About() {
return (
<div> <h2>About</h2> </div>
);
}
function Topics({ match }) {
return (
<div> <h2>Topics</h2> <ul> <li> <Link to={`${match.url}/rendering`}>Rendering with React</Link> </li> <li> <Link to={`${match.url}/components`}>Components</Link> </li> <li> <Link to={`${match.url}/props-v-state`}>Props v. State</Link> </li> </ul> <Route path={`${match.path}/:topicId`} component={Topic} /> <Route exact path={match.path} render={() => <h3>Please select a topic.</h3>} /> </div>
);
}
function Topic({ match }) {
return (
<div> <h3>{match.params.topicId}</h3> </div>
);
}
export default BasicExample;
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
CSS 压缩/解压工具
在线压缩/解压 CSS 代码
图片转BASE64编码
在线图片转Base64编码工具