他のコンポーネントからのルータへのアクセスパラメタ

Question

現在、React.jsを探しています& Reduxと反応ルータで遊んでいました。私の質問です：他のコンポーネントからURLパラメータにアクセスする方法はありますか？例えば

：

Iは、（props.match.params.bar介して）:bar PARAMを表示Foo成分を持っているが、私はまた、ヘッダコンポーネントで: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

は、私の知る限りでは、反応-ルータを使用すると、必要なものを達成するための任意の標準的な方法を持っていません。しかし、path-to-regexpライブラリで正規表現を使用すると、手動で行うことができます。あなたは常に反応ルータとして正しい結果を得るでしょう。それは自己内部でこのライブラリを使って経路を一致させます。

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