在反应路由器中添加基于路由的类

Question

我有以下代码库。

<Router>
    <Grid className='full-height' fluid>
        <Row>
            <Col xs={6} xsOffset={6} className='top-line' />
        </Row>
        <Row>
            <NavBar />
        </Row>
        <Row>
            <div className='content-wrapper'>
                <Switch>
                    <Route exact path='/' component={Container} />
                    <Route path='/login' component={Login} />
                    <Route path='/register' component={Register} />
                    <Route path='/dashboard' component={Dashboard} />
                    <Route exact path='/packages' component={Packages} />
                    <Route path='*' component={NotFound} />
                </Switch>
            </div>
        </Row>
    </Grid>
</Router>

我想根据路由路径向Grid 组件添加一个类。基本上我想要的是在path='/' 上添加一个特定的类，这样我就可以自定义样式主页。由于container 组件位于content-wrapper 内部，因此我无法按照我想要的方式设置它的样式。

如何在 react router 中添加基于路由路径的自定义类？

Answer 1

我找到了一种解决方法来添加要添加的类。

<Router>
                <Route render={(props) => {
                    let HomePageStyling = '';
                    if (props.location === '/') {
                        HomePageStyling = 'landing-page';
                    }
                    return (
                        <Grid className={'full-height' + HomePageStyling} fluid>
                            <Row>
                                <Col xs={6} xsOffset={6} className='top-line' />
                            </Row>
                            <Row>
                                <NavBar />
                            </Row>
                            <Row>
                                <div className='content-wrapper'>
                                    <Switch>
                                        <Route exact path='/' component={Container} />
                                        <Route path='/login' component={Login} />
                                        <Route path='/register' component={Register} />
                                        <Route path='/dashboard' component={Dashboard} />
                                        <Route exact path='/packages' component={Packages} />
                                        <Route path='*' component={NotFound} />
                                    </Switch>
                                </div>
                            </Row>
                        </Grid>
                    );
                }}
                />
            </Router>