标签：http 笔记 react Router 组件 router 路由 加载

一、基本用法

npm install --save react-router

路由器Router就是React的一个组件

import { Router } from 'react-router';
render(<Router/>, document.getElementById('app'));

Router组件是一个容器，路由要通过Route组件定义：

import { Router, Route, hashHistory } from 'react-router';

render((
  <Router history={hashHistory}>
    <Route path="/" component={App}/>
    <Route path="/repos" component={Repos}/>
    <Route path="/about" component={About}/>
  </Router>
), document.getElementById('app'));

用户访问根路由/（比如http://www.example.com/）。路由的切换由URL的hash变化决定，举例来说，用户访问http://www.example.com/，实际会看到的是http://www.example.com/#/。上面代码中，用户访问/repos（比如http://localhost:8080/#/repos）时，加载Repos组件；

二、嵌套路由

<Router history={hashHistory}>
  <Route path="/" component={App}>
    <Route path="/repos" component={Repos}/>
    <Route path="/about" component={About}/>
  </Route>
</Router>

用户访问/repos时，会先加载App组件，然后在它的内部再加载Repos组件

<App>
  <Repos/>
</App>

注意，被嵌套的组件App要写成：

render() {
  return <div> {this.props.children} </div>
}

this.props.children就是子组件

子路由可以不写在Router组件里面，而是单独传入Router组件的routes属性：

let routes = <Route path="/" component={App}>
  <Route path="/repos" component={Repos}/>
  <Route path="/about" component={About}/>
</Route>;

<Router routes={routes} history={browserHistory}/>

三、path 属性

path属性指定路由的匹配规则，可以省略。这样的话，不管路径是否匹配，总是会加载指定组件：

<Route path="inbox" component={Inbox}>
   <Route path="messages/:id" component={Message} />
</Route>

当用户访问/inbox/messages/:id时，会加载下面的组件：

<Inbox>
  <Message/>
</Inbox>

现在如果把 path="inbox"去掉，加载结果还是一样的

四、通配符

标签：http,笔记,react,Router,组件,router,路由,加载
来源： https://www.cnblogs.com/sanhuamao/p/13943755.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。