response-router v4: определите, был ли маршрут найден снаружи компонента

Question

У меня есть компонент, который всегда должен отображаться, но должен быть видимым, только если не найдено ни одного маршрута (<Iframe isVisible={ifNoRoutesMatched} />).

Пока я не нашелхороший способ проверить, так ли это.Я пошел по этому ужасному пути установки переменной в состояние с обертками компонентов, но должен быть лучший способ !?Также для этого нужны withRouter и PureComponent, иначе catchAllWrapper вызывает бесконечный цикл рендеринга:

class App extends PureComponent {
  state = {
    routeMatched: false,
  }

  catchAllWrapper = () => {
    this.setState({ routeMatched: false });
    return null;
  }

  routeWrapper = (RouteComponent) => {
    const RouteWrapper = (props) => {
      this.setState({ routeMatched: true });
      return <RouteComponent {...props} />;
    };

    return RouteWrapper;
  }

  render() {
    return (
      <div className="App">
        <Navigation />
        <Switch>
          <Route path="/chat" component={this.routeWrapper(Chat)} />
          ...more routes...
          <Route component={this.catchAllWrapper} />
        </Switch>
        <Iframe isVisible={!this.state.routeMatched} />
      </div>
    );
  }
}

export default withRouter(App);

Я бы предпочел сравнить ручной массив строк маршрута, чем добавить эту сложность!

this.props.match содержит информацию только о том, какой маршрут соответствовал соответствующему компоненту, поэтому он довольно бесполезен.

Есть ли лучший способ сделать это?

Вариант использования: это iframe, у которого на некоторых маршрутах загружено устаревшее приложение, поэтому его не следует уничтожать и перерисовывать между маршрутами

Answer 1

Почему бы не создать облегченный фиктивный компонент для маршрутизатора, который можно свободно монтировать и размонтировать, а затем привязать методы обратного вызова из вашего текущего класса к его событиям жизненного цикла?

class Dummy extends Component {
  componentDidMount() {
    this.props.didMount();
  }

  componentWillUnmount() {
    this.props.willUnmount();
  }

  render() {
    return null;
  }
}

class App extends Component {
  state = {
    showIframe: false,
  }

  cbDidMount = () => {
    this.setState({ showIframe: true });
  }

  cbWillUnmount = () => {
    this.setState({ showIframe: false });
  }

  render() {
    return (
      <div className="App">
        <Navigation />
        <Switch>
          <Route path="/chat" component={Chat} />
          {/* more routes */}
          <Route render={() => <Dummy didMount={this.cbDidMount} willUnmount={this.cbWillUnmount} />} />
        </Switch>
        <Iframe isVisible={this.state.showIframe} />
      </div>
    );
  }
}

Answer 2

Это должно сделать это для вас.Используйте Маршрут , у которого нет свойства path (они всегда отображаются), и вы можете проверить наличие нулевого совпадения внутри компонента.

Вотworking CodeSandBox Пример

Откройте консоль внизу, чтобы увидеть, что она всегда отображается.

Answer 3

Чтобы отобразить компонент, когда не найдено ни одного маршрута, вы можете использовать следующий код:

               <Switch>                  
                {this.props.notLoggedIn === true
                  ? <Route path='/' component={LandingPage}/>                                          
                  : <Dashboard />                    
                }
                <Route component={PageNotFound}/>
              </Switch>    

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

Если не найдено ни одного маршрута, отображается компонент PageNotFound.

Для рабочего примера не стесняйтесь взглянуть на: https://github.com/osamamaruf/reactnd-project-would-you-rather/blob/master/src/components/App.js
и ссылка на репо: https://github.com/osamamaruf/reactnd-project-would-you-rather