Блог

Прежде всего, я новичок в мире Typescript и React, поэтому, пожалуйста, потерпите меня.

Проблема, с которой я сталкиваюсь, заключается в том, что всякий раз, когда я перемещаюсь, используя, например, кнопки, отображаемые как «NavLink» или «Link» из react-router-dom пакета, в результате изменяется только URL, и ничего не отображается.

Если я нажимаю enter в адресной строке (принудительно запускаю указанный URL), компоненты отображаются, в противном случае я вижу только фон моих приложений.

Разница со всеми другими вопросами, которые я мог найти здесь, на SO и других сайтах, заключается в том, что я не использую высокоуровневый BrowserRouter but Router , чтобы я мог использовать createBrowserHistory() и передавать его маршрутизатору, а также использовать его из MobX, когда это необходимо.

Самое странное — я использовал тот же код в другом приложении для маршрутизации, и он работает нормально. Версия react-router была 5.1.3, теперь у меня 5.1.5, поэтому я полагаю, что это что-то еще, чего я не вижу.

Что еще более странно — если я BrowserRouter переключусь на низкоуровневый, все работает нормально — похоже, что, возможно, есть какая-то проблема с history пакетом, который я использую?

index.tsx:

 import React from 'react';
import ReactDOM from 'react-dom';
import "./app/layout/styles.css";
import App from './app/layout/App';
import * as serviceWorker from './serviceWorker';
import 'semantic-ui-css/semantic.min.css'
import { createBrowserHistory } from 'history';
import { Router } from 'react-router-dom';

export const history = createBrowserHistory();

ReactDOM.render(
  <Router history={history}>
    <App />
  </Router>,
  document.getElementById('root')
);

serviceWorker.unregister();
  

App.tsx:

 import { observer } from "mobx-react-lite";
import React, { Fragment } from "react";
import {
  Route,
  RouteComponentProps,
  Switch,
  withRouter,
} from "react-router-dom";
import { ToastContainer } from "react-toastify";
import { Container } from "semantic-ui-react";
import CheckinAuthorize from "../../features/checkin/CheckinAuthorize";
import CheckinDetails from "../../features/checkin/CheckinDetails";
import HomePage from "../../features/home/HomePage";
import NavBar from "../../features/nav/NavBar";
import NotFound from "./NotFound";

const App: React.FC<RouteComponentProps> = ({ location }) => {
  return (
    <Fragment>
      <Route exact path="/" component={HomePage} />
      <Route
        path={"/(. )"}
        render={() => (
          <Fragment>
            <ToastContainer position='bottom-right'/>
            <NavBar />
            <Container style={{ marginTop: "7em" }}>
              <Switch>
                <Route exact path="/" component={HomePage} />
                <Route exact path="/checkin" component={CheckinAuthorize} />
                <Route path="/checkin/:id" component={CheckinDetails} />
                <Route component={NotFound} />
              </Switch>
            </Container>
          </Fragment>
        )}
      />
    </Fragment>
  );
};

export default withRouter(observer(App));
  

Пример того, как я использую NavLinks:

 import React from "react";
import { Menu, Container } from "semantic-ui-react";
import { observer } from "mobx-react-lite";
import { NavLink } from "react-router-dom";

const NavBar: React.FC = () => {
  return (
    <div>
      <Menu fixed="top" inverted>
        <Container>
          <Menu.Item header as={NavLink} exact to="/">
            <img
              src="/assets/logo.png"
              alt="logo"
              style={{ marginRight: "10px" }}
            />
            Home
          </Menu.Item>
        </Container>
      </Menu>
    </div>
  );
};

export default observer(NavBar);

  

Так что, по-видимому, это было связано с пакетом «история».

Я удалил пакет истории, который я ранее установил (сделал yarn remove history ), и у меня все начало работать. Кажется, я был слишком активен, добавив этот пакет в свой проект. Теперь импорт указывает на node_modules/@types/history/index то, что я не устанавливал явно, вероятно, зависимость.

Хотя вопрос на самом деле не связан с ответом, я оставлю его как есть — возможно, у кого-то будет такая же проблема, и он наткнется на нее. Жаль, что у меня не было такой возможности 🙂

Такие проблемы можно игнорировать, переключившись на BrowserRouter, но просто для понимания реальной проблемы. Это для тех парней, которые действительно хотят использовать низкоуровневый маршрутизатор. Проблема связана с установленным вами пакетом истории. Попробуйте использовать предыдущие версии, такие как 4.7.2, которые позволяют вашему импорту экспортировать createHistory по умолчанию из истории / createBrowserHistory вместо последних, которые импортируют именованный экспорт createBrowserHistory из истории напрямую.

Из того, что я испытал, последняя история позволяет изменять маршруты только при обновлении страницы, а также для navlink или link он не обрабатывает какие-либо маршруты, просто изменяет URL.

ну, вот и все, надеюсь, это кому-то поможет.