Исключаякомпонент на конкретной странице с реагировать на маршрутизатор

Question

Вот рабочий код:

const AppRouter = () => (
<BrowserRouter>
  <div>
    <Header />
    <Switch>
      <Route path="/" component={DashboardPage} exact={true} />
      <Route path="/:id" component={ViewerPage} /> // <-- Exclude Header component from this page
      <Route path="/create" component={CreatePage} />
      <Route path="/edit/:id" component={EditPage} />
      <Route path="/help" component={HelpPage} />
      <Route component={NotFoundPage} />
    </Switch>
  </div>
</BrowserRouter>
);

export default AppRouter;

Я не могу понять, как исключить компонент Header из страницы компонента ViewerPage.Есть ли способ сделать это?

Answer 1

Компонент withRouter Higher-order-Component, предоставляемый пакетом react-router, предоставит вам доступ к объекту местоположения.Если у вас есть это, вы можете условно визуализировать заголовок путем короткого замыкания.

import {withRouter} from 'react-router'

const App = ({location}) => (
  <div>
    {location.pathname !== '/exclusion-path' && <Header/>}
    <Switch>
      ...
    </Switch>
  </div>
)

export default withRouter(App)

или для исключения по нескольким путям ...

const exclusionArray = [
  '/path-one',
  '/another-path',
]

const App = ({location}) => (
  <div>
    {exclusionArray.indexOf(location.pathname) < 0 && <Header/>}
    <Switch>
      ...
    </Switch>
  </div>
)

Если вы делаете что-то серьезное, ярекомендую использовать контекстный API и короткое замыкание на значении, предоставленном контекстом.Если это так, и вам нужно какое-то направление, я с радостью объясню вам.

PS Если вы захотите сделать это с помощью API Alpha Hooks, я действительно буду в восторге.

РЕДАКТИРОВАТЬ: Для адресации.

Переместите маршрутизатор за пределы компонента приложения.

import {BrowserRouter as Router} from 'react-router-dom'
import ReactDOM from 'react-dom'

ReactDOM.render(
  <Router>
    <App/>
  </Router>,
  document.getElementById('render-target')
)

Answer 2

В моем последнем проекте были точно такие же требования, и я решил разделить заголовок на его собственный компонент и использовать фрагменты React.Идиоматик!

import React, { Fragment } from 'react'
// ...

const App = () => (
  <div>
    <Switch>
      <Route path='/no-header-route' component={NoHeaderComponent} />   // Route without header
      <Fragment>            // This is the key
        <Header/>           // Header is in its own component
        <Route path='/route-1' component={Comp1}/>  // Route with header
        <Route path='/route-2' component={Comp2}/>  // Route with header
      </Fragment>
    </Switch>
  </div>
)

Answer 3

1 - что-то вроде In Header.js

  import {withRouter} from 'react-router-dom';

        class Header extends Component {
          render() {
            if (this.props.location.pathname === '/') {
              return null
            }
            return (
              // other stuff
            );
          }
        }
  export default withRouter(Header);

Обратите внимание, что withRouter может отличаться в зависимости от версии реагирующего маршрутизатора.Но идея та же: проверяйте свое имя пути с помощью пути ViewerPage и не отображайте заголовок, если это путь ...

2- Другой подход - сделать то же самое с 'redux'

поэтому, когда загружается ViewerPage, отправляйте действие.В ViewerPage.js

class ViewerPage extends Component {
          componentDidMount() {
            this.props.updateShouldDisplayHeader(false);
          }
          componentWillUnmount(){
             this.props.updateShouldDisplayHeader(true);
           }
        }

В Header.js

class Header extends Component {
          render() {
            if(!this.props.shouldDisplayHeader) {
               return null;
            }
            return (
              // other stuff
            );
          }
        }

Полагаю, вы уже знаете, как создавать действия и использовать редукторы для redux