React

React-router

联系站长 作者:web知道 来源:未知 2019-12-28 13:34 我要评论

React-router...

yarn add react-router-dom 或者npm i react-router-dom -S 

路由的基本使用(BrowserRouter, HashRouter, Route&Link)
BrowserRouter / HashRouter 指的是路由的最外层  一般使用HashRouter as Router
 
HashRouter: http://localhost:8080/#/abc/def
BrowserRouter: http://localhost:8080/abc/def
 
如果有服务器端的动态支持,建议使用 BrowserRouter,否则建议使用 HashRouter。原因在于,如果是单纯的静态文件,假如路径从 / 切换到 /a 后,此时刷新页面,页面将无法正常访问。
二者的替换方法很简单,我们在引入 react-router-dom 时,如以下:
import { BrowserRouter as Router } from 'react-router-dom'


Switch        会遍历自身的子元素(即路由)并对第一个匹配当前路径的元素进行渲染,后面的不会在渲染 ,意思即是只显示匹配的第一个
Redirect     重定向
exact       表示要求路径与location.pathname必须完全匹配
跳转         this.props.history.push()


import React, { Component } from 'react';
import {Layout,Menu} from 'antd'
import {Link,Route,Redirect,Switch} from 'react-router-dom'
 
render(){
return (
      <Layout style={{background: '#fff' }}>
            <Sider width={200} style={{ background: '#fff' }}>
                 <Menu
                       mode="inline"
                       defaultSelectedKeys={[window.location.hash.split('/')[2]]}
                        style={{ height: '100%' }}
                  >
                        <Menu.Item key="hot"><Link to="/mv/hot/1">正在热映</Link></Menu.Item>
                        <Menu.Item key="upcoming"><Link to="/mv/upcoming/1">即将上映</Link></Menu.Item>
                        <Menu.Item key="top250"><Link to="/mv/top250/1">top250</Link></Menu.Item>
                 </Menu>
            </Sider>
            <Content>
                  <Switch>
                        <Route path="/mv/awfifnypm/:id" render={(props)=><Details {...props} />} />
                        <Route path='/mv/:type/:pageNum' exact render={(props)=><MvList {...props}/>}></Route>
                        <Redirect to="/mv/hot/1" />
                  </Switch>
            </Content>
      </Layout>
)
}
 

页面接收参数
this.props.match.params.‘属性’




本文如有侵犯版权请联系站长删除。

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源;3.作者投稿可能会经我们编辑修改或补充。

相关文章
网友点评
精彩导读