通过react-router的Link进行页面跳转并传值的方法

使用React router定义路由时，我们可以给指定一个path，然后指定通配符可以携带参数到指定的path：

首先定义路由:

import { HashRouter,Route} from 'react-router-dom';

class App extends React.Component {
  render() {
    return (
        <HashRouter>
            <Route path={`${props.match.url}/article/:pathname`} component={Article} />                    
        </HashRouter>
    )
  }
}

上面指定了一个参数pathname
在需要跳转的页面引入Link组件，实现跳转

import { Link } from "react-router-dom"

……
<Link  to={`/main/article/${pathname}`}>{`${title}`}</Link>
……

这样点击Link后，页面就会跳转到Article组件，Article组件的参数接收：

    componentDidMount() {
        console.log(this.props.match.params.pathname); 
    }

this.props.match.params获取参数信息，注意传递的参数为字符串类型，如果要传递对象，可以使用json对象，先将json对象转为字符串进行传递，收到后再将字符串转为json对象.

更多