Question

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

我怎样才能将auth作为其中一个道具，以及那些来自Route to Home和SplashPage的道具？谢谢。

Answer 1

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

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

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

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

1 个答案: