在React中通過路由傳遞服務的實例

在這種情況下，我正在使用react router v4，這一點很重要。在React中通過路由傳遞服務的實例

我有一個應用程序組件，AuthService對象在其中成功實例化。

我想獲得某些組件是相同的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;

當家庭或SplashPage呈現，他們有從路線典型的道具，但沒有權威性的認識。

我該如何獲得auth作爲其中一個道具，以及那些從Route到Home和SplashPage的道具？謝謝。

來源

2017-04-13 Andrew

您可以使用路徑render函數並將auth作爲prop傳遞給需要auth的組件。

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

這樣你就可以傳遞組件需要的自定義道具。這裏是link的文檔。

來源

2017-04-13 20:42:12

如果我想創建AuthRoute，那麼我可以使用它來呈現任何需要auth實例的組件？到目前爲止我有這麼多... const AuthRoute =（{component，... rest}）=> { { return React.createElement（組分，道具）; }} /> ） } – Andrew

解決的最後一位與此： React.createElement（組分，{...道具，AUTH}）; 仍然是一個新手的跡象，傳播運營商仍然是神祕而神奇的。：） – Andrew

當時我有類似的情況。 Render對於react-router v2中的路由不可用。對我來說，解決方案是使用組合組件。它幫助我包裝我的組件以獲得更多的行爲。它看起來像''現在AuthWrapper是一個簡單的包裝器組件，如果auth符合，它將呈現配置文件，否則它將用戶帶到登錄頁面。你可以閱讀更多關於它[這裏]（https://facebook.github.io/react/docs/higher-order-components.html） –

在React中通過路由傳遞服務的實例

回答

相關問題