react-router简易入门

文章参考链接:
https://segmentfault.com/a/1190000010174260#articleHeader14
http://www.kindemh.cn/post/19
https://blog.pusher.com/getting-started-with-react-router-v4/

React Router 4 简易入门


安装

React Router 有三个包:

  • react-router ,
  • react-router-dom
  • react-router-native

npm安装:

npm install --save react-router-dom


路由

存在<BrowserRouter><HashRouter>l两种组件
<BrowserRouter>主要用来管理 动态请求(推荐用BrowerRouter)
<HashRouter> 主要用于静态网站


渲染<Router>

路由器只能渲染一个元素,创建一个<App>组件来组合渲染其余的组件

import { BrowserRouter } from 'react-router-dom'
ReactDOM.render((
  <BrowserRouter>
    <App />
  </BrowserRouter>
), document.getElementById('root'))

<App>

<App>可以自由组合组合
example

// this component will be rendered by our <___Router>
const App = () => (
  <div>
    <Header />
    <Main />
  </div>
)


路由(Route)

<Route>可以根据URL的路径名来进行渲染

<Route>是如何渲染的

分析:path和url匹配成功后,路由确定渲染的参数有三种

  • component:返回一个react组件
  • render:返回react element的函数,匹配成功后会调用该函数
  • children:
//component
<Route path='/page' component={Page} />
const extraProps = { color: 'red' }

//render
<Route path='/page' render={(props) => (
  <Page {...props} data={extraProps}/>
)}/>

//childern
<Route path='/page' children={(props) => (
  props.match
    ? <Page {...props}/>
    : <EmptyPage {...props}/>
)}/>


实例分析:

参考地址为:https://blog.pusher.com/getting-started-with-react-router-v4/

1.系统的入口文件index.js 代码如下

39833535-7B08-4A26-92FD-D51E63A31499.png

对于红色框中的理解 用<BroserRouter>来进行渲染
<App/>组件来对真个页面的组件的组合
2.<App/>对应的文件为App.js

24F0B342-0AE1-4561-8A05-3C6737FBB320.png

红色框中有两个组件:<Navigation/>导航组件和<Main/>导航组件
效果如下:
69BF4FDF-E4E3-420F-A6E6-5F9DEFFCECDF.png

总结思路是:在入口文件index.js入口文件中需要用
BrowserRouter来对APP组件进行渲染
APP组件包含 页面的各个组件的整合和路由的组件的集合

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Lesson11、首先确保安装了Node.js和npm依赖包管理工具2、在git上克隆官方示例程序 git clo...
    冰_心阅读 2,741评论 0 16
  • 引用:https://github.com/WangZhechao/expross 1.简介 这篇文章是分析exp...
    宫若石阅读 3,128评论 1 8
  • 父母做到了 HM01dguh4ue 去要求小孩 体会那些是底线 自己的经历 要培养小孩的哪些方面 什么样的相处模式...
    神刀阅读 208评论 0 1
  • 本应属于夏天 却在黎明之前聒噪 像摩的轰油门的爆破音 想叫醒贪睡的人 尖锐的声音里 藏着巨大的身影 一只或是几只 ...
    萧竺阅读 193评论 0 0
  • 我又不欠你的,你不过是一个志愿者协会会长,学生会主席都没对人这样! 我没有周末吗?我忙了一周不想睡觉吗?你自己赖在...
    奥罗拉拉拉阅读 265评论 0 0