如何赋予包装器组件内的子组件访问<Route />道具的权限?

时间:2020-03-02 18:43:55

标签: javascript reactjs react-router

我想访问props.location.search,因为我希望某个组件能够根据URL来获取数据,但是我不知道该如何给该组件提供prop。它位于另一个名为DashboardPage的包装器组件中,其结构如下:

class DashboardPage extends React.Component {    

    render() {      
        return (            
            <>   
            <Navigation></Navigation>   
            <div className="container">
                <Category></Category>
                <Movies></Movies>
                <Footer></Footer>
            </div>
            </>
        )
    }
}

现在我的路由器设置现在看起来像这样。

                <Switch>
                    <Redirect exact from="/" to="/discover/Popular" />
                    <Route 
                        path="/discover/Popular" 
                        component={DashboardPage}
                    />
                    <Route
                        exact={true} 
                        path="/movie/:id" 
                        render={(props) => (
                            <MovieDetailPage key={props.match.params.id} {...props} />
                        )}
                    />
                    <Route path="/watchlist" component={WatchlistPage}/>
                    <Route path="/login" component={LoginPage}/>                    
                </Switch>   

只有Dashboard获得了这些道具,因为我为此创建了一个Route,但是如何赋予Movies组件相同的访问权限。更具体地说,我的页脚组件具有一个按钮,该按钮使用Link to ='?page = 2'并更改了URL,现在,Movies组件应根据URL更改和Redux操作重新呈现。我只是不知道如何使用当前的路由器设置。

0 个答案:

没有答案