リアクションのルートを経由したサービスのインスタンスの受け渡し

Question

私はこの場合リアクションルータv4で作業していますが、これは重要なことです。

私は、AuthServiceオブジェクトが正しくインスタンス化されたAppコンポーネントを持っています。

私は、Authオブジェクトのインスタンスが同じである特定のコンポーネントを取得したいと思います。これらのコンポーネントはRouteで定義されています。

は、ここに私のコードのサンプルです：

const auth = new AuthService(); 

class App extends Component { 

    render() { 
    return (
     <div> 
     <ul> 
      <li><Link to="/">Home</Link></li> 
      <li><Link to="/splash">Login</Link></li> 
     </ul> 
     <Route exact path="/" component={Home} auth={auth}/> 
     <Route exact path="/splash" component={SplashPage} auth={auth}/> 
     </div> 
    ); 
    } 
} 

export default App; 

HomeまたはSplashPageをレンダリングするとき、彼らはルートからの典型的な小道具が、認証の無い意識を持っています。

プロンプトの1つとして認証を取得するにはどうすればよいでしょうか。ありがとうございました。

Answer 1

route render関数を使用して、authをpropとする必要があるコンポーネントにpropを渡すことができます。

<Route {...routeConfig here} render={props => (
     <Home {...props} auth={auth}/> 
)}/> 

このようにして、コンポーネントに必要なカスタムの小道具を渡すことができます。 こちらのドキュメントはlinkです。