目录
React-router与React-router-dom的选择
前言
React-router与React-router-dom的选择
React-router
React-router提供一些router的核心api,包括Router,Route,Switch等,但是没有提供dom操作进行跳转的api.
React-router-dom
React-router-dom提供BrowserRouter,Route,Link等api,我们可以通过dom的事件控制路由。
路由跳转获取参数的方法
准备工作
首先我们搭建一个文章列表和文章详情页面
文章列表页面(news.tsx)
import React from 'react'
import { Link } from 'react-router-dom'
export default class News extends React.Component {
render() {
const news = [
{
aid: '1',
title: '111'
},
{
aid: '2',
title: '222'
},
{
aid: '3',
title: '333'
}
]
return (
<div>
新闻组件
<ul>
{news.map(item => (
<li key={item.aid}>
{/*跳转到新闻详情页面*/}
<Link to={'/content'} >{item.title}</Link>
</li>
))}
</ul>
</div>
)
}
}
新闻详情页面(content.tsx)
import React, { Component } from 'react'
export default class Content extends Component{
render() {
return <div>新闻详情页面</div>
}
}
主页面(app.tsx)
import React, { Component } from 'react'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
import News from './containers/News'
import Content from './containers/Content'
class App extends Component {
render() {
return (
<Router>
<div>
<Link to="/news">News</Link>
<Route path="/news" component={News} />
<Route path="/content" component={Content} />
</div>
</Router>
)
}
}
export default App
到目前为止,我们已经完成了路由的基本配置, 并且可以跳转到详情页面,下面我们来探讨如何将文章列表页面的aid传递到文章详情,并打印出来呢?
一、配置动态路由
1. 修改路由为动态传参 path="/content/:aid"
2.通过props里的 match.params.aid获取传递的id
------------------------------------------------------------分割线--------------------------------------------------------------------------------------
此时,在上面的文件中修改如下:
App.tsx
//替换 <Route path="/content" component={Content} />
{/* 动态路由 */}
<Route path="/content/:aid" component={Content} />
文章列表(New.tsx)
// {/*跳转到新闻详情页面*/}
//替换 <Link to={'/content'} >{item.title}</Link>
{/* 动态路由 */}
<Link to={`/content/${item.aid}`}>{item.title}</Link>
文章详情页面(Content.tsx)
import React, { Component } from 'react'
//定义props类型
type IProps = Readonly<{
match: any;
location:any;
}>
//定义状态类型
type IState = Readonly<{
title: string;
}>
export default class Content extends Component<IProps, IState> {
constructor(props: IProps) {
super(props)
this.state= {
title: ''
}
}
//组件挂载完成后更改状态
componentDidMount() {
const { match,location } = this.props;
this.setState({
title:match.params.aid
})
}
render() {
return <div>新闻详情页面 {this.state.title}</div>
}
}
二、get传值
1.Route配置 <Route path="/content" component={Content} />
2.Link跳转配置 <Link to={`/content/?aid=${item.aid}`}>{item.title}</Link>
3.获取参数 this.porps.location.search
Note:j推荐使用 query-string 来处理 URL 查询字符串