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

Question

在这种情况下，我正在使用反应路由器 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 意识。

我怎样才能获得身份验证作为道具之一，以及来自 Route down to Home 和 SplashPage 的那些道具？谢谢你。

Answer 1

您可以使用路由render功能并将身份验证作为道具传递给需要身份验证的组件。

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

通过这种方式，您可以传递组件所需的自定义道具。这是文档的链接。