react路由
react路由基本语法
1
2
3
4
5
6
7
8
9
10
| 1.BrowserRouter这是包裹所有的路由
2.Route跳转的路径
3.路由默认的是不精准匹配，加上exact就是精准匹配了
4.NavLink专门用来跳转的标签，转化后是a标签
5.activeClassName当鼠标点击上去设置对应的样式，同时还要给根标签加上精准匹配exact;
6.Switch是用来当没有路由满足的时候就会熏染没有路径的路由不能放其他的html语法，只能放路由，也可以说匹配一条路由
7.Redirect这个是重定向，专门用来处理404页面的返回的
8.this.props.match.params.设置的值 可以拿到动态匹配的值
9.withRouter这是一个可以用来吧非路由组件变成路由组件的方法 利用高阶函数属性代理的原理;
export default withRouter(App);
|
react路由获取数据
1
2
| 1.Redirect这个是重定向，专门用来处理404页面的返回的;
2.this.props.match.params.设置的值 可以拿到动态匹配的值;
|
react路由获取数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| 1.params
<Route path='/path/:name' component={Path}/>
<link to="/path/2">xxx</Link>
this.props.history.push({pathname:"/path/" + name});
读取参数用:this.props.match.params.name
2.query
<Route path='/query' component={Query}/>
<Link to={{ path : ' /query' , query : { name : 'sunny' }}}>
this.props.history.push({pathname:"/query",query: { name : 'sunny' }});
读取参数用: this.props.location.query.name
3.state
<Route path='/sort ' component={Sort}/>
<Link to={{ path : ' /sort ' , state : { name : 'sunny' }}}>
this.props.history.push({pathname:"/sort ",state : { name : 'sunny' }});
读取参数用: this.props.location.query.state
4.search
<Route path='/web/departManange ' component={DepartManange}/>
<link to="web/departManange?tenantId=12121212">xxx</Link>
this.props.history.push({pathname:"/web/departManange?tenantId" + row.tenantId});
读取参数用: this.props.location.search
|
to的对象属性
1
2
3
4
5
| 10.to的对象属性
pathname:'' 路由跳转的路径
search:'?key=value' 这个是查询字符串的
hash:'' 这个是哈希值
state:{} 这个是一个传递数据的，把数据传给路由组件；
|
react路由获取查询字符串
1
2
| import Url from "url"
3.Url.parse(this.props.location.search,true).query.age;
|
在做404页面跳转的时候，如果做了定时器，一定要在组件卸载的时候做判断，否侧会出现异步报错
react路由模块化
1
2
3
4
5
6
7
8
9
10
| router.length>0 &&(
router.map((item,index)=>{
return(
<Route
key={index}
{...item}
/>
)
})
)
|
react嵌套路由传递子组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <Switch>
{routers.length>0&&(
routers.map((item,index)=>{
return (
<Route
key={index}//打标记
exact={item.exact}//精度匹配
path={item.path}react路由
render={(props)=>{ //通过reader给子组件传递组件形成路由模块化
return <item.component data={item.routes}/>
}}
/>
)
})
)}
{/*<Route exact path={'/'} component={Home}></Route>*/}
{/*<Route path={'/news'} component={News}></Route>*/}
{/*<Route path={'/user'} component={User}></Route>*/}
{/*<Route component={Not404}></Route>*/}
</Switch>
|