使用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对象.