React Router добавить условие, если маршрута нет - PullRequest
0 голосов
/ 22 октября 2018

Я новичок в реаги-редуксе.Здесь я использую следующую вещь для показа 404 не найденных, если данный маршрут не совпадает.

сейчас, в этом

Мой App.js

class App extends React.Component {
    render() {
        return (
            <Provider store={store}>
                <div className="container-fluid">
                    <Header />
                    <Main />
                </div>
            </Provider>
        )
    }
}

Мой Main.js

 render() {
    return (
      <div>
        <Router history={history}>
          <div>
            {this.props.isFetching && <Loading />}
            <Switch>
              <PrivateRoute exact path="/" component={LandingScreen} />
              <PrivateRoute exact path="/quiz-setup" component={QuizSetupMain} />
              <PrivateRoute exact path="/quiz-questions" component={FetchedQuestionComponent} />
              <Route exact path="/login" component={LoginComponent} />
              <Route exact path="/*" component={NotFound} something="foo" />
            </Switch>
          </div>
        </Router>
      </div>
    )
  }
}

NotFound.js

импорт React из 'реакции';

export default class NotFound extends React.Component {

  render() {
    return (
      <h1>Something Went Wrong</h1>
    );
  }
}

Теперь, когда пользователь нажимает на любой маршрут, которого нет, он показывает, что 404 не найден, но он также показывает часть заголовка.Я знаю, что это потому, что я отобразил и заголовок, и основной в файле app.js, и не найден, в основном, но есть ли способ не показать этот заголовок, если маршрут не совпадает.спасибо

Ответы [ 3 ]

0 голосов
/ 22 октября 2018

Вы можете добавить функцию, которая возвращает Компонент после Заголовка.

, например:

const withHeader = (Component) => {
  return class withHeaderComponent extends React.Component{ render() { return (<div><Header /><Component /></div>)}}
}

после создания этой функции, вы можете использовать ее как,

<Route exact path="/login" component={withHeader(LoginComponent)} />.

Таким образом, вы можете добавить заголовок для нужных вам маршрутов.

<Route component={NotFound}/> 

Теперь ваши 404 будут без заголовка!

Дайте мне знать, если у вас возникнут трудности.

0 голосов
/ 22 октября 2018

Вы также можете использовать подстановочный знак для перенаправления людей на не найденную страницу, маршрут недоступен.

import React from 'react';
import { Switch } from 'react-router';
import { BrowserRouter , Route ) from 'react-router-dom;
import NotFound from './NotFound';

const routes = (   
               <BrowserRouter>
                  <Switch>
                     <Route path="*" component={NotFound}/>
                  </Switch>
                </BrowserRouter>
               )
0 голосов
/ 22 октября 2018

Вы можете использовать компонент динамических компонентов.

Идея состоит в том, что каждый вызываемый путь маршрута перемещается по общему компоненту, который вызывает подходящее поведение на основе вызываемого компонента.Например -

              <PrivateRoute exact path="/" component={CustomComponent} />

, а затем, соответственно, передать реквизиты, чтобы определить, какой экран должен отображать компонент заголовка.

Итак, по сути, ваш код будет выглядеть примерно так -

class App extends React.Component {
render() {
    return (
        <Provider store={store}>
            <div className="container-fluid">
                <Main />
            </div>
        </Provider>
       )
   }
}

и компонент <Header/> будут вызываться в пользовательском компоненте на основе соответствующих условий, которые вы выдвинули

Надеюсь, это поможет:)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...