React-router history / 路由 (课件2019-1-19）

发布时间：2020-12-15 20:35:39 所属栏目：百科来源：网络整理

导读：http://localhost http://localhost/static/index.html / - index.html http://localhost/index.html ? 以前后台接收到前端的请求，不但要发送数据给前端还要返回页面前端路由，切换页面不需要服务器返回，减少了服务器压力、单页应用公共资源只需要请求一

http://localhost

http://localhost/static/index.html

/ -> index.html

http://localhost/index.html

以前后台接收到前端的请求，不但要发送数据给前端还要返回页面

前端路由，切换页面不需要服务器返回，减少了服务器压力、单页应用

公共资源只需要请求一次即可，前端的职责就更多，前端比重就较高（逻辑多了）

安装路由：

　　npm i?react-router-dom

https://reacttraining.com/react-router/

history路由（浏览器历史记录管理）在服务器下访问

　　添加浏览器历史记录的

　　 history.pushState(数据,‘浏览器都忽略的名字‘,你显示的url地址)

　　 onpopstate

　　　　当你触发了浏览器的前进或者后退就会触发这个事件

　　　　在这个事件中，ev下有state属性，可以接收到pushState时的数据

　　history.length 查看历史记录中的个数（据说最高是50个）

　　 back() 回退

　　 forward() 前进

　　 go()

BrowserRouter : (浏览器路由)

1.import {BrowserRouter as Router} from ‘react-router-dom‘;

2.引入把Router包在ReactDOM.render(根下);

比如:

ReactDOM.render(<Router><App /></Router>);

3.配置路由：

　　 import {Route} from ‘react-router-dom‘;

（1）component={组件}也可以是一个函数（函数声明组件）

　　 <Route path="/home" component={(props)=>{return <div>1234</div>}}/>

　　props:

　　　　在切换路由的时候记录的细节信息。

　　　　是函数的情况下，要传入路由细节。

　　　　在组件中，可以通过this.props去查看、使用

　　　　 match　　->　　params、url

　　　　location　　->　　hash、search、state

　　　　history　　->　　go() push() replace()

　　一般使用component的函数，都是使用函数声明组件。

注意:

　　component如果放函数，一定要放有名的函数组件，

　　不然（匿名函数）点击多次本路由，会多次挂载和卸载

一般判断使用可选组件，使用 render={(props)=>{}}

（2）render可以返回jsx或者一个组件，更喜欢通过render去判断使用需求的组件。

（3）children跟一个函数，不管你匹不匹配path都执行组件.

Redirect (重定向)

　　 <Redirect to="/dashboard"/>? ?等同于调用了replace(),替换了当前的url

　　to后面可以跟字符串（路径即可），

　　还可以跟对象（to={{pathname:‘/‘,search:‘?a=1&b=2‘}）

　　存放数据

特性:

　　默认配置如果/下有组件，那么所有关于/xxx都吃得到/下的这个组件

如果，/下匹配组件，/下的xxx不想匹配/这个组件，那么可以在Route 下

加一个 exact 意思，只有/才能匹配到/下的组件。

<Route path="/one" /> /one/two 能显示one

<Route path="/one" exact/> /one/two 只能显示/two不能显示/one

/one????/one/two????true????no

/one????/one/two????false???yes

strict

　　严格匹配

　　在path为/detail/ 没有加strict那么 url为/detail能够匹配

　　加了strict的时候，能匹配

　　　　1./detail/

　　　　2./detail/xxx

　　可以2个一起用

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!