路由
路由根据url的不同切换对应的组件实现SPA
单页应用,更加接近于原生体验
下载
npm i --save react-router-dom
路由分为2中 react-router
和react-router-dom
,第一种只提供了核心api
路由模式
hash
模式-> HashRouter
刷新的时候页面不会丢失 带#号
Brower
模式->BrowserRouter
通过历史记录api
来进行路由切换,刷新会丢失
全局引用
在`index.js
`
import {BrowserRouter,HashRouter} from "react-router-dom"
// 路由模式包裹根组件
ReactDOM.render( <HashRouter> <App /> </HashRouter>, document.getElementById('root'));
跳转
在App.js
添加
<Route path="/home" component = {Home} />
运行后再浏览器输入/home
路径后,即可跳转。
子路由
在父组件添加Route
子路由要写上父路径,不然会变成同级路由,完整代码
import React, { Component } from 'react'
import {Route, NavLink} from 'react-router-dom'
import HomeA from "./SubHomeA"
import HomeB from "./SubHomeB"
class Home extends Component {
constructor(props) {
super(props)
this.state = {
}
}
render() {
return (
<div> 主页
<div></div>
<div>
<div><NavLink to="/home/a" >HomeA</NavLink></div>
<div><NavLink to="/home/b" >HomeB</NavLink></div>
</div>
<Route path="/home/a" component= {HomeA}></Route>
<Route path="/home/b" component= {HomeB}></Route>
</div>
)
}
}
export default Home
普通按钮具备路由功能
{/* 使用普通按钮跳转页面 */}
<div><button onClick={()=>{this.props.history.push("/home/a")}}>Homea</button></div>
路由传参
传递字符串
- 需要在路由的规则中设置接收的传递参数
:xxx
表示
<Route path="/user/:userId" component = {User} />
- 发送参数直接在跳转路径后编写
<NavLink to="/user/abcdefghijklmn123">User</NavLink>
- 接收
props.match.params.xxx
componentDidMount(){
console.log(this.props.match.params.userId)
this.setState({
userId: this.props.match.params.userId
})
}
constructor(props) {
super(props)
this.state = {
userId : ""
}
}
render() {
return (
<div>用户列表
<p>{this.state.userId}</p>
</div>
)
}
传入对象
使用query
方式
- 不需要修改路由规则,不需要进行参数配置
- 直接发送数据
<NavLink to={{pathname:"/profile", query:{name:"laoshiren"}}}>Profile</NavLink>
...
<Route path="/profile" component = {Profile} />
- 使用
this.props.location.query.xxx
console.log("props.location.query.xxx")
完整代码
import React, { Component } from 'react'
class Profile extends Component {
constructor(props) {
super(props)
this.state = {
query:{}
}
}
componentDidMount(){
// 将路由参数传递给state
console.log(this.props.location.query)
this.setState({
query:this.props.location.query
})
}
// 页面显示参数 key: value的形式
getInfo(Param) {
var domArr = [];
Object.keys(Param)
.map( (keyName,index)=>{
domArr.push(<div key= {index} >{keyName} - <span>{Param[keyName]}</span> </div>)
} )
return domArr
}
render() {
return (
<div>信息
<div></div>
{ this.getInfo(this.state.query) }
</div>
)
}
}
export default Profile