React Router 404 с CSSTransitionGroup - PullRequest
Новая
       36

React Router 404 с CSSTransitionGroup

0 голосов
/ 08 июля 2020

Мне трудно реализовать компонент 404, объединяющий React Router с React Transition Group. Мой компонент «NoMatch» не будет отображаться в CSSTranisitionGroup. Я попытался переместить группу CSST в Routes of Switch, но, похоже, это не решило проблему. Как я могу успешно создать страницу 404 с помощью CSST Group? См. Также прилагаемую песочницу: Ссылка на песочницу 

import React from "react";
import { BrowserRouter, Route, Switch, NavLink } from "react-router-dom";
import { CSSTransition } from "react-transition-group";
import "./styles.css";
import Home from "./Home";
import About from "./About";
import Contact from "./Contact";
import NoMatch from "./NoMatch";

const Data = {
  routes: [
    {
      path: "/",
      exact: true,
      title: "Home",
      navTitle: "Home",
      contentClass: "home",
      Component: Home
    },
    {
      path: "/about",
      exact: true,
      title: "About",
      navTitle: "About",
      contentClass: "about",
      Component: About
    },
    {
      path: "/contact",
      exact: true,
      title: "Contact",
      navTitle: "Contact",
      contentClass: "contact",
      Component: Contact
    }
  ]
};

export default function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <nav>
          <ul>
            {Data["routes"].map((route, i) => (
              <li key={i}>
                <NavLink
                  className={"nav-link"}
                  exact={route["exact"]}
                  to={route["path"]}
                >
                  {route["navTitle"]}
                </NavLink>
              </li>
            ))}
          </ul>
        </nav>

        {Data["routes"].map((route, i) => (
          <Route key={i} exact path={route.path}>
            {({ match }) => (
              <CSSTransition
                in={match != null}
                timeout={1000}
                classNames={`${route.contentClass} page`}
                unmountOnExit
              >
                <Switch>
                  <Route render={() => <route.Component {...route} />} />
                  <Route component={NoMatch} />
                </Switch>
              </CSSTransition>
            )}
          </Route>
        ))}
      </BrowserRouter>
    </div>
  );
}
...