react 路由的实现过程,听说现在用react的比较多

react–路由

下载(网页版) yarn add react-router-dom
官网 :https://reacttraining.com/react-router/
2 路由的模式mode :BrowserRouter–历史记录模式 HashRouter—hash模式

3 Router 入口文件index.js 文件 App 需要加r 其他的不加r



(exact)

react路由切换的组件有三个重要的属性

**1 location ---pathname search  state(undefined) --要想获取到
2 match-- params-- this.props.match.params.变量  (取路由参数) params默认值是一个空对象
3 history--push  go  replace  listen编程式导航的方法

<Route path=“路径” render={()=>{return <组件{…props}>}}>**

4 Link 没有选择后的样式 ,NavLink有样式
xxx
xx 默认的类名 active 也可以改变 activeClassName
activeClassName=“selected” 可以更改NavLink选中后的类名
Switch 是渲染的匹配的第一个

5 Redirect 重定向

6 404页面

7 <Route path=’/xx’ render={(props)=>{
return <组件 {…props} /> 意思是: 根据条件渲染不同的组件,可以做权限路由的效果
}}>

8 权限

9 withRouter 可以让不是路由切换的组件也拥有路由的三个属性
是一个高阶组件HOC–属性代理 和反向继承
10 监控路由的组件变化 --this.props.history.listen((location)=>{监听location.pathname})
11 向路由切换 的组件传多个值
<Link to={{pathname:“路径”,state:{key:value,…}}}
this.props.location.state // (state默认是undefined)
编程式导航传递多个值 this.props.history.push(path,state)

12 兄弟组件传值 pubsub-js
yarn add pubsub-js
PubSub.subscribe(“事件名”,(evtName,data)=>{ })
PubSub.publish(“事件名”,数据)

13 受控组件 和非受控组件
onChange事件 value受到onChange 的控制
受控组件可以添加id来进行区分相同的onChange事件,e.target.id

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章