Создание защищенных маршрутов и обработка ошибок

npm install react-router-dom

import React from 'react';
import { Route, Redirect } from 'react-router-dom';

const ProtectedRoute = ({ component: Component, isAuthenticated, ...rest }) => (
  <Route
    {...rest}
    render={(props) =>
      isAuthenticated ? (
        <Component {...props} />
      ) : (
        <Redirect to={{ pathname: '/login', state: { from: props.location } }} />
      )
    }
  />
);

export default ProtectedRoute;

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import ProtectedRoute from './ProtectedRoute';
import LoginPage from './LoginPage';
import Dashboard from './Dashboard';

function App() {
  const isAuthenticated = /* проверка аутентификации */;

  return (
    <Router>
      <Switch>
        <Route path="/login" component={LoginPage} />
        <ProtectedRoute path="/dashboard" component={Dashboard} isAuthenticated={isAuthenticated} />
      </Switch>
    </Router>
  );
}

import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // Здесь можно отправить информацию об ошибке на сервер
  }

  render() {
    if (this.state.hasError) {
      return <h1>Что-то пошло не так.</h1>;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

import ErrorBoundary from './ErrorBoundary';
import SomeComponent from './SomeComponent';

function App() {
  return (
    <div>
      <ErrorBoundary>
        <SomeComponent />
      </ErrorBoundary>
    </div>
  );
}