React Router 从另一个组件访问参数答案

【问题标题】：React Router access params from another componentReact Router 从另一个组件访问参数
【发布时间】：2017-05-23 10:21:18
【问题描述】：

我目前正在研究 React.js 和 Redux，并且正在使用 react-router。我的问题是：有没有办法从另一个组件访问 url 参数？

例如：

我有一个Foo 组件，它显示:bar 参数（通过props.match.params.bar），但我还想在标题组件中显示:bar 的值。使用ReactRouterDOM.withRouter，我可以访问props.match。问题是这与Foo 组件中的不同（它包含有关父路由'/'的信息）。那么如何获得Header 组件中的值，我是否走在正确的轨道上？

提前致谢

const Foo = (props) => {
    return (<div> <h1> Foo {props.match.params.bar} </h1> </div>);
};

const App = (props) => {
    return (
        <div>
            <HeaderWrapper />
            <h1> Hello App </h1>
            <p><ReactRouterDOM.Link to='/foo/bar'>Foo Bar</ReactRouterDOM.Link></p>
            <hr />
        
            <ReactRouterDOM.Route path='/foo/:bar' component={Foo} />
        </div>);
};

// Header
const Header = (props) => {
    console.log(props);
    return ( <header> <small>You are here: {}</small>  </header>);
};
const HeaderWrapper = ReactRouterDOM.withRouter(Header);

// Router
ReactDOM.render((
        <ReactRouterDOM.MemoryRouter>
            <ReactRouterDOM.Route path='/' component={App} />
        </ReactRouterDOM.MemoryRouter >
 ), document.getElementById('root'));

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script>
<script src="https://unpkg.com/react-router-dom/umd/react-router-dom.min.js"></script>

【问题讨论】：

标签： javascript reactjs react-router react-redux

【解决方案1】：

据我所知，react-router 没有任何标准的方式来实现你所需要的。但是您可以使用带有path-to-regexp 库的正则表达式来手动执行此操作。你总是会得到正确的结果，因为 react-router 它自己在内部使用这个库来匹配路由。

const re = pathToRegexp('/foo/:bar')
const result = re.exec(props.location.pathname)
if(result){
    console.log(result[1]); //bar
}

【讨论】：