在 React 中通过路由传递服务实例

Question

在这种情况下，我正在使用 React Router v4，这一点很重要。

我有一个 App 组件，其中成功实例化了一个 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;

当 Home 或 SplashPage 呈现时，它们具有来自 Route 的典型道具，但不知道身份验证。

如何获得 auth 作为 props 之一，以及那些从 Route 到 Home 和 SplashPage 的 props？谢谢。

Answer 1

你可以使用路由 render 函数，将 auth 作为 prop 传递给需要 auth 的组件。

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

这样你就可以传递你的组件需要的自定义道具。这是文档的 link。

在 React 中通过路由传递服务实例

Passing an Instance of a Service Through a Route in React

javascript

reactjs

react-router

react-router-v4