如何从 react-router-doms 的渲染中传递道具？

Question

我知道要将道具传递给我的路线，我需要使用渲染。 例如：

const BaseRouter = (props) => (

    <div>
        {console.log(props)} // this displays everything I need, including props.username
        <Route exact path='/room/' render={(props) => <Room {...props} />} />
    </div>
);

问题是在我的 Room 组件中，唯一传递的道具是历史、位置和匹配（这些直接来自 react-router-dom）。

我也尝试过手动传递所需的道具：

<Route exact path='/room/' render={(props) => <Room {...props} username={props.username} />} />

但在 Room 内，我仍然无法为 props.username 定义。 有任何想法吗？

Answer 1

你需要给你的变量一个不同的名字。 执行render={(props) => <Room {...props} />将始终传递路由器 props，这就是未定义props.username的原因。

const BaseRouter = (props) => (

    <div>
        <Route exact path='/room/' render={(routeProps) => <Room {...routeProps} {...props} />} />
    </div>
);

Answer 2

Route 组件也需要子组件。

 const BaseRouter = (props) => ( <div> {console.log(props)} // this displays everything I need, including props.username <Route exact path='/room/'> <Room {...props}/> </Route> </div> );

在Room组件中，您可以使用 useHistory、useLocation 和 useRouteMatch 挂钩。 如果Room是基于 class 的组件，那么 withRouter HOC 也很有用。