Как я могу проверить, реагирует ли маршрутизатор в контексте?

Question

Я перевожу приложение AngularJS на React понемногу, и я хотел бы иметь пользовательский компонент RouterLink React, который проверяет, находится ли react-router в контексте, чтобы он мог использовать history и, если нет, возвращается к использованию старого доброго window.location. Но я не вижу никакого способа проверить это в документации * 1005. *

Я пытался использовать withRouter, но он выдает, когда не в контексте, и ErrorBoundary, кажется, не ловит ошибка.

Кто-нибудь знает, как я мог go сделать это?

Answer 1

Просто заверните крючок в try/catch:

const {useState, useEffect, Fragment} = React;
const {useLocation, MemoryRouter} = ReactRouter;

const Cmp = () => {
  let loc;
  try {
    loc = useLocation();
  } catch (err) {
    return (
      <div>No Router Available</div>
    );
  }
  return (
    <div>Hello I can see {loc.pathname}</div>
  );
};

const App1 = () => {
  return (
    <Cmp/>
  );
};

const App2 = () => {
  return (
    <MemoryRouter>
      <Cmp/>
    </MemoryRouter>
  );
};

ReactDOM.render(<App1 />, document.getElementById("app1"));
ReactDOM.render(<App2 />, document.getElementById("app2"));

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/react-router@5.1.2/umd/react-router.js"></script>

<div id="app1"></div>
<div id="app2"></div>

Answer 2

В пакете react-router отображается контекст маршрутизатора, то есть __RouterContext, с помощью которого вы можете проверить, доступен ли маршрутизатор:

import React, { useContext } from 'react';
import { __RouterContext } from 'react-router';

const MyComponent = (props) => {
  const router = useContext(__RouterContext);

  if (router) {
    // Router context is avaible
  } else {
    // Use window.location as router context is not availble in this component
  }

  return <SomeOtherComponent />
}