如何從 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 也很有用。