关于React-Router4.x中获取参数总结

目录

前言

React-router与React-router-dom的选择

路由跳转获取参数的方法

准备工作

一、配置动态路由

二、get传值

---

前言

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的事件控制路由。

参考:React-router4简约教程

路由跳转获取参数的方法

准备工作

   首先我们搭建一个文章列表和文章详情页面

文章列表页面(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 查询字符串