React Router：レンダリングされたルートコンポーネントのアクセス履歴

Question

これについてはいくつか質問がありますが、私はそれを動作させるようには見えません。ルート経由でレンダリングされる子コンポーネントから「履歴」にアクセスする必要があります。 （それはredux容器から小道具を受け取る）。

ヒストリオブジェクトを各ルートでレンダリングされるコンポーネントに渡す必要があるため、子コンポーネント内にthis.props.history.push('/route')を追加できます。このアプリケーションはあまり動的ではなかったので、各ルートはcomponent={someComponent}でハードコードされていました。しかし、私は、ルートを動的に行うには、render={() => <someComponent />}を使用する必要があることを発見しました。

ルートをcomponent={}からrender={() => ...}に変更した後、子コンポーネントの履歴が失われました。あなたが実際に小道具を取得renderを使用する場合

import React, {Component} from 'react'; 
import ReactDOM from 'react-dom'; 
import { HashRouter as Router, Link, Route, Redirect } from 'react-router-dom'; 

import { Nav_Item } from '.' 
import DynamicTab from '.'; 

export default class NavBar extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state={} 
    } 
    render() { 

    let tabs = []; 

    let routes = []; 

    this.props.tabs.forEach(function(tab, index) { 
     tabs.push(<Nav_Item key={tab.name} path_name={'/' + tab.name} tab_text={tab.label} />); 
     routes.push(<Route key={tab.name} path={'/' + tab.name} render={() => <DynamicTab tabName={tab.name} tabSpecs={tab} />} />); 
    }) 

    return (
     <Router> 
     <div> 

      <div> 
      <ol> 
       { tabs }  
      </ol> 
      </div> 

      <Redirect to={'/' + this.props.tabs[0].name} /> 
      { routes } 

     </div> 
     </Router> 
    ) 
    } 
} 

Answer 1

：

私のコードは次のようなものです。ドキュメントには、次のような例があります。

<Route {...rest} render={props => (
    <FadeIn> 
     <Component {...props}/> 
    </FadeIn> 
)}/> 

これらの小道具から履歴にアクセスできるはずです。

もう1つの解決策は、条件付きで<Redirect/>コンポーネントをレンダリングすることです。だから、あなたはこのような内部状態を持っているかもしれません：

// in your components render function.. 
if(this.state.shouldRedirect) { 
    return (<Redirect to={yourURL} />); 
}