Question

我目前正在调查React.js＆amp; Redux和正在玩反应路由器。我的问题是：有没有办法从另一个组件访问url params？

例如：

我有一个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>

Answer 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
}

React Router访问另一个组件的params

1 个答案: