Скрыть заголовок на некоторых страницах в Reaction-router-DOM - PullRequest
Новая
       54

Скрыть заголовок на некоторых страницах в Reaction-router-DOM

0 голосов
/ 10 июля 2019

Есть ли способ скрыть заголовок моей страницы только для некоторых маршрутов в React Router?Моя проблема сейчас в том, что мой App компонент отображает мой Main компонент, который содержит мой BrowserRouter, а мой Header отображается в моем App компоненте, поэтому у меня нет способа визуализировать заголовок на основеПуть маршрута.

Вот код:

App.js

import React from 'react';
import {BrowserRouter} from 'react-router-dom';
import Main from './Main';
import Header from './Header';
import Footer from './Footer';

const App = () => (
    <BrowserRouter>
        <Header/>
        <Main/>
        <Footer/>
    </BrowserRouter>
);

export default App;

Main.js

import React from 'react';
import {Route, Switch} from 'react-router-dom';
import Home from './Home';
import Login from './Login';

const Main = () => (
    <main>
        <Switch>
            <Route exact path='/' component={Home}/>
            <Route exact path='/login' component={Login}/>
        </Switch>
    </main>
);

export default Main;

В этом приложении я хотел бы скрыть верхний и нижний колонтитулы на странице входа в систему.

Ответы [ 2 ]

1 голос
/ 15 июля 2019

В итоге я использовал Redux. Это был лучший вариант, потому что у меня более двадцати страниц (только 3 показаны в коде ниже), на всех из которых видимость верхнего / нижнего колонтитула варьируется. Я создал один редуктор для верхнего и нижнего колонтитула. Вот мое решение: 

import ...

class App extends React.Component {
    render() {
        return (
            <BrowserRouter>
                {this.props.header ? <Header/> : ''}
                <Switch>
                    <Route exact path='/' component={Home}/>
                    <Route exact path='/login' component={Login}/>
                    <Route exact path='/signup' component={Signup}/>
                </Switch>
                {this.props.footer ? <Footer/> : ''}
            </BrowserRouter>
        );
    }
}

const mapStateToProps = state => state;
export default connect(mapStateToProps)(App);
1 голос
/ 13 июля 2019

Вы можете использовать компонент withRouter Higher-Order для доступа к объекту props.location в вашем компоненте приложения и проверки, находится ли пользователь на странице входа или регистрации, используя props.location.pathname

import {BrowserRouter, withRouter} from 'react-router-dom'
const App = () => (
   <BrowserRouter>

     {
      props.location.pathname!=='/login' ? <Header/>:null
     }
        <Main/>
        <Footer/>

   </BrowserRouter>
);

export default withRouter(App);
...