React路由
路由配置
-
react-router 是浏览器和原生应用的通用部分
-
react-router-native 是用于原生应用的
-
react-router-dom 是用于浏览器的
BrowserRouter VS HashRouter
- – 都是路由的基本组件,需将其放在最外层,选其一使用
- – 内部只能含有一个子节点
- – BrowserRouter 的 URL 是指向真实 URL 的资源路径,页面和浏览器的 history 保持一致
- – HashRouter 使用 URL 中的 hash(#)部分去创建路由
//React路由引用
import { BrowserRouter as Router,Route,Link} from 'react-router-dom';
//React路由配置
import { render } from '@testing-library/react';
import React from 'react'
import {BrowserRouter as Router,Route,Link} from 'react-router-dom';
const Home =()=>{
return <div>Home</div>
}
const About =()=>{
return <div>About</div>
}
const App = ()=>{
return <Router>
<ul>
<li><Link to='/'>home</Link></li>
<li><Link to='/about'>about</Link></li>
</ul>
<Route exact path="/" component={Home}/>
<Route path="/about" component={About}/>
</Router>
}
export default App;
import { render } from '@testing-library/react';
import React from 'react'
import {BrowserRouter as Router,Redirect,Route,Link,Switch,NavLink} from 'react-router-dom';
const Home =()=>{
return <div>Home</div>
}
const About =(props)=>{
console.log(props.location.state);
return <div>About</div>
}
const Content =(props)=>{
console.log(props)
return <div>{props.match.params.page}</div>
}
//路径小写 组件名字大写
const App = ()=>{
return <Router>
<ul>
<li><NavLink exact activeStyle={{color:'red'}} to='/'>home</NavLink></li>
<li><NavLink activeStyle={{color:'red'}} to={{
pathname:'/about',
state:{id:100}
}}>
About</NavLink></li>
<><NavLink activeStyle={{color:'red'}} to='/news'>News</NavLink></>
<li><NavLink activeStyle={{color:'red'}} to='/content/1'>Content01</NavLink></li>
<li><NavLink activeStyle={{color:'red'}} to='/content/2'>Content02</NavLink></li>
</ul>
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/about" component={About}>
</Route>
<Route path='/news' render={()=><div>News</div>}/>
<Route path="/content/:page" component={Content}/>
</Switch>
</Router>
}
export default App;
<Route/>
-
匹配路径,挂载组件
<Route exact path='/home' component={ Home }/>
-
exact:严格匹配
-
path:字符串类型,用来匹配url
-
component:值是一个组件,在path匹配成功后挂载这个组件
-
render:一个返回组件的方法
-
children:一个返回组件的方法
<Switch>...</Switch>
-
只会挂载与
<Route>
路径匹配成功的第一个 -
子节点只能是
<Route>
或<Redirect/>
<Switch>
<Route exact path="/" component={ Home }/>
<Route path="/about" component={ About }/>
<Route path="/:user" component={ User }/>
<Route component={ NoMatch }/>
</Switch>
<Link to = "...">...</Link>
to : string
<Link to="/home">Home</Link>
to : object
<Link to={ {
pathname: '/courses',
search: '?sort=name',
hash: '#the-hash',
state:{id : 1}
// 传到组件的数据,通过 this.props.location.state 获取
} } > Courses </Link>
<NavLink to ="...">...</NavLink>
-
NavLink 是 Link 的子类
-
activeClassName:string,被选中时添加的类名
-
activeStyle:object,被选中时添加的行内样式
-
exact:boolean,严格匹配
<Redirect to = "...">
-
当被挂载时,将路由重定向为to属性指定的地址
-
<Route path="/home" render={( )=><Redirect to="/other“ />}/>
-
from和exact两个属性只能用在
<Switch>
组件下的<Redirect/>
<Switch>
<Redirect from = '/old‘ to = ‘/new‘ />
<Route path='/new' component={ New }/>
</Switch>
动态路由
路由配置
<Route path='/content/:id' component={Content}/>
<Link to ={'/content/1'}>{item.title}</Link>
数据接收
match对象
- 一个包含
<Route path=''>
匹配路径参考信息的对象 - params
- url、path、isExact
路由get传值
路由配置
<Route path='/content' component={ Content }/>
<Link to={
/content?id=1}>{item.title}</Link>
数据接收
数据存放在this.props.location.search
通过URL模块解析
npm install url -save
url.parse(urlStr:string.parseQueryStr:true)
组件化
UI组件:展示,通过属性props
传递数据
智能组件:状态(state
、setState
)、生命周期(componentDidMount
)
hooks:函数组件化