deps: react-router-dom 4 -> 6 (history 5, react-router-bootstrap 0.26)
Removes the Router/Switch/Route/Link/LinkContainer legacy-context
warnings. Keeps the shared history singleton (used outside React by
NotificationsObserver + Utils/location) via unstable_HistoryRouter, and
bridges v6 hooks back to v4-shaped history/match/location props with a
new withRouterCompat HOC so the ~20 class pages stay untouched.
- <Switch> -> <Routes>, component= -> element=
- Authenticated/Public -> guard components (children or <Navigate replace>)
- LocationListener -> useLocation + useEffect function
- regex route /fire/:type(active|archive|alert)/:id -> /fire/:type/:id
- history.listen callback is ({ location }) in history v5
Browser-verified: SPA nav, /subscriptions->/login auth redirect,
deep-link /fire/archive/:id (params), browser back/forward. REST smoke
byte-identical.
This commit is contained in:
parent
a1a1b9a801
commit
e2d13ca64c
10 changed files with 177 additions and 212 deletions
|
|
@ -1,9 +1,9 @@
|
|||
/* eslint-disable jsx-a11y/no-href */
|
||||
/* eslint import/no-absolute-path: [2, { esmodule: false, commonjs: false, amd: false }] */
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import React, { useEffect } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Router, Switch, Route } from 'react-router-dom';
|
||||
import { unstable_HistoryRouter as HistoryRouter, Routes, Route, useLocation } from 'react-router-dom';
|
||||
import { Container } from 'react-bootstrap';
|
||||
import { I18nextProvider } from 'react-i18next';
|
||||
import { Helmet } from 'react-helmet-async';
|
||||
|
|
@ -22,6 +22,7 @@ import Reconnect from '../../components/Reconnect/Reconnect';
|
|||
import Navigation from '../../components/Navigation/Navigation';
|
||||
import Authenticated from '../../components/Authenticated/Authenticated';
|
||||
import Public from '../../components/Public/Public';
|
||||
import withRouterCompat from '../../components/withRouterCompat/withRouterCompat';
|
||||
import Index from '../../pages/Index/Index';
|
||||
import Subscriptions from '../../pages/Subscriptions/Subscriptions';
|
||||
import NewSubscription from '../../pages/NewSubscription/NewSubscription';
|
||||
|
|
@ -56,35 +57,16 @@ import history from '../../components/History/History';
|
|||
import '../../components/NotificationsObserver/NotificationsObserver';
|
||||
import './App.scss';
|
||||
|
||||
class LocationListener extends Component {
|
||||
// https://stackoverflow.com/questions/43512450/react-router-v4-route-onchange-event
|
||||
|
||||
componentDidMount() {
|
||||
// Tracks route changes for Piwik/analytics. v6 replaces the old
|
||||
// contextTypes.router.history.listen wiring with the useLocation hook.
|
||||
const LocationListener = ({ children }) => {
|
||||
const location = useLocation();
|
||||
useEffect(() => {
|
||||
// https://github.com/GoogleChrome/rendertron#rendering-budget-timeout
|
||||
window.renderComplete = true;
|
||||
this.handleLocationChange(this.context.router.history.location);
|
||||
this.unlisten =
|
||||
this.context.router.history.listen(this.handleLocationChange);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.unlisten();
|
||||
}
|
||||
|
||||
handleLocationChange(location) {
|
||||
// your staff here
|
||||
console.log(`----- location: '${location.pathname}'`);
|
||||
Meteor.Piwik.trackPage(location.pathname);
|
||||
}
|
||||
|
||||
// https://stackoverflow.com/questions/39133797/react-only-return-props-children
|
||||
render() {
|
||||
return this.props.children;
|
||||
}
|
||||
}
|
||||
|
||||
LocationListener.contextTypes = {
|
||||
router: PropTypes.object
|
||||
}, [location.pathname]);
|
||||
return children;
|
||||
};
|
||||
|
||||
LocationListener.propTypes = {
|
||||
|
|
@ -94,6 +76,27 @@ LocationListener.propTypes = {
|
|||
]).isRequired
|
||||
};
|
||||
|
||||
// v6 routes render an `element`, not a `component`, and no longer pass down
|
||||
// history/match/location. Wrap each class page once (module scope, so the
|
||||
// component identity stays stable across renders) with the v4-compat HOC.
|
||||
const IndexR = withRouterCompat(Index);
|
||||
const SubscriptionsR = withRouterCompat(Subscriptions);
|
||||
const NewSubscriptionR = withRouterCompat(NewSubscription);
|
||||
const ViewSubscriptionR = withRouterCompat(ViewSubscription);
|
||||
const EditSubscriptionR = withRouterCompat(EditSubscription);
|
||||
const ProfileR = withRouterCompat(Profile);
|
||||
const StatusR = withRouterCompat(Status);
|
||||
const FiresMapR = withRouterCompat(FiresMap);
|
||||
const ZonesMapR = withRouterCompat(ZonesMap);
|
||||
const FiresR = withRouterCompat(Fires);
|
||||
const AuthR = withRouterCompat(Auth);
|
||||
const SignupR = withRouterCompat(Signup);
|
||||
const LoginR = withRouterCompat(Login);
|
||||
const LogoutR = withRouterCompat(Logout);
|
||||
const VerifyEmailR = withRouterCompat(VerifyEmail);
|
||||
const RecoverPasswordR = withRouterCompat(RecoverPassword);
|
||||
const ResetPasswordR = withRouterCompat(ResetPassword);
|
||||
|
||||
const App = props => (
|
||||
/* https://react.i18next.com/components/i18nextprovider.html */
|
||||
<div>
|
||||
|
|
@ -101,7 +104,7 @@ const App = props => (
|
|||
<ErrorBoundary>
|
||||
<I18nextProvider i18n={i18n}>
|
||||
<ErrorBoundary appName={i18n.t('AppNameFull')} title={i18n.t('general-error-title')} subTitle={i18n.t('general-error-description')}>
|
||||
<Router history={history}>
|
||||
<HistoryRouter history={history}>
|
||||
<LocationListener>
|
||||
{ !props.loading &&
|
||||
<div className="App">
|
||||
|
|
@ -116,37 +119,38 @@ const App = props => (
|
|||
<ReSendEmail {...props} />
|
||||
|
||||
<Container>
|
||||
<Switch>
|
||||
<Route exact name="index" path="/" component={Index} />
|
||||
<Authenticated exact path="/subscriptions" component={Subscriptions} {...props} />
|
||||
<Authenticated exact path="/subscriptions/new" component={NewSubscription} {...props} />
|
||||
<Authenticated exact path="/subscriptions/:_id" component={ViewSubscription} {...props} />
|
||||
<Authenticated exact path="/subscriptions/:_id/edit" component={EditSubscription} {...props} />
|
||||
<Authenticated exact path="/profile" component={Profile} {...props} />
|
||||
<Authenticated exact path="/status" component={Status} {...props} />
|
||||
<Route path="/fires" component={FiresMap} industries={false} {...props} />
|
||||
<Route path="/zones" component={ZonesMap} {...props} />
|
||||
<Routes>
|
||||
<Route path="/" element={<IndexR {...props} />} />
|
||||
<Route path="/subscriptions" element={<Authenticated authenticated={props.authenticated}><SubscriptionsR {...props} /></Authenticated>} />
|
||||
<Route path="/subscriptions/new" element={<Authenticated authenticated={props.authenticated}><NewSubscriptionR {...props} /></Authenticated>} />
|
||||
<Route path="/subscriptions/:_id" element={<Authenticated authenticated={props.authenticated}><ViewSubscriptionR {...props} /></Authenticated>} />
|
||||
<Route path="/subscriptions/:_id/edit" element={<Authenticated authenticated={props.authenticated}><EditSubscriptionR {...props} /></Authenticated>} />
|
||||
<Route path="/profile" element={<Authenticated authenticated={props.authenticated}><ProfileR {...props} /></Authenticated>} />
|
||||
<Route path="/status" element={<Authenticated authenticated={props.authenticated}><StatusR {...props} /></Authenticated>} />
|
||||
<Route path="/fires" element={<FiresMapR industries={false} {...props} />} />
|
||||
<Route path="/zones" element={<ZonesMapR {...props} />} />
|
||||
|
||||
<Route path="/fire/:type(active|archive|alert)/:id" component={Fires} {...props} />
|
||||
<Route path="/fire/:id" component={Fires} {...props} />
|
||||
<Public path="/auth/:token" component={Auth} {...props} />
|
||||
<Public path="/signup" component={Signup} {...props} />
|
||||
<Public path="/login" component={Login} {...props} />
|
||||
<Route path="/logout" component={Logout} {...props} />
|
||||
<Route path="/sandbox" component={Sandbox} {...props} />
|
||||
<Route path="/error" component={TestError} {...props} />
|
||||
{/* v6 has no regex params; `:type` is validated inside Fires. */}
|
||||
<Route path="/fire/:type/:id" element={<FiresR {...props} />} />
|
||||
<Route path="/fire/:id" element={<FiresR {...props} />} />
|
||||
<Route path="/auth/:token" element={<Public authenticated={props.authenticated}><AuthR {...props} /></Public>} />
|
||||
<Route path="/signup" element={<Public authenticated={props.authenticated}><SignupR {...props} /></Public>} />
|
||||
<Route path="/login" element={<Public authenticated={props.authenticated}><LoginR {...props} /></Public>} />
|
||||
<Route path="/logout" element={<LogoutR {...props} />} />
|
||||
<Route path="/sandbox" element={<Sandbox {...props} />} />
|
||||
<Route path="/error" element={<TestError {...props} />} />
|
||||
|
||||
<Route name="verify-email" path="/verify-email/:token" component={VerifyEmail} />
|
||||
<Route name="recover-password" path="/recover-password" component={RecoverPassword} />
|
||||
<Route name="reset-password" path="/reset-password/:token" component={ResetPassword} />
|
||||
<Route name="terms" path="/terms" component={Terms} />
|
||||
<Route name="privacy" path="/privacy" component={Privacy} />
|
||||
<Route name="license" path="/license" component={License} />
|
||||
<Route name="credits" path="/credits" component={Credits} />
|
||||
<Route name="about" path="/about" component={About} />
|
||||
<Route path="/verify-email/:token" element={<VerifyEmailR />} />
|
||||
<Route path="/recover-password" element={<RecoverPasswordR />} />
|
||||
<Route path="/reset-password/:token" element={<ResetPasswordR />} />
|
||||
<Route path="/terms" element={<Terms />} />
|
||||
<Route path="/privacy" element={<Privacy />} />
|
||||
<Route path="/license" element={<License />} />
|
||||
<Route path="/credits" element={<Credits />} />
|
||||
<Route path="/about" element={<About />} />
|
||||
|
||||
<Route component={NotFound} />
|
||||
</Switch>
|
||||
<Route path="*" element={<NotFound />} />
|
||||
</Routes>
|
||||
</Container>
|
||||
<Footer />
|
||||
<Reconnect {...props} />
|
||||
|
|
@ -154,7 +158,7 @@ const App = props => (
|
|||
{props.i18nReady.get() && <CookieConsent /> }
|
||||
</div>}
|
||||
</LocationListener>
|
||||
</Router>
|
||||
</HistoryRouter>
|
||||
</ErrorBoundary>
|
||||
</I18nextProvider>
|
||||
</ErrorBoundary> }
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue