[wip] Update react-router-dom

zipkin-lens/package.json

@@ -34,7 +34,7 @@
  "@types/react": "^16.9.23",
  "@types/react-dom": "^16.9.5",
  "@types/react-redux": "^7.1.7",
- "@types/react-router-dom": "^5.1.3",
+ "@types/recharts": "^1.8.14",
  "@types/redux-mock-store": "^1.0.2",
  "@types/shortid": "0.0.32",
  "classnames": "2.3.2",
@@ -51,7 +51,7 @@
  "react": "^16.13.0",
  "react-dom": "^16.13.0",
  "react-redux": "^7.1.0",
- "react-router-dom": "^5.0.1",
+ "react-router-dom": "6.21.1",
  "react-scripts": "5.0.1",
  "react-use": "17.4.2",
  "react-virtualized-auto-sizer": "1.0.20",

zipkin-lens/src/components/App/App.tsx

@@ -1,5 +1,5 @@
 /*
- * Copyright 2015-2020 The OpenZipkin Authors
+ * Copyright 2015-2024 The OpenZipkin Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
  * in compliance with the License. You may obtain a copy of the License at
@@ -11,7 +11,6 @@
  * or implied. See the License for the specific language governing permissions and limitations under
  * the License.
  */
-
 import MomentUtils from '@date-io/moment';
 import { I18nProvider } from '@lingui/react';
 import {
@@ -21,7 +20,7 @@ import {
 import { MuiPickersUtilsProvider } from '@material-ui/pickers';
 import React, { Suspense } from 'react';
 import { Provider } from 'react-redux';
-import { BrowserRouter, Route } from 'react-router-dom';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import { useTitle } from 'react-use';
 import { ThemeProvider } from 'styled-components';
 
@@ -51,21 +50,25 @@ const App: React.FC = () => {
  <AlertSnackbar />
  <I18nProvider i18n={i18n}>
  <BrowserRouter basename={BASE_PATH}>
- <Layout>
- <Route exact path="/" component={DiscoverPage} />
- {config.dependency.enabled && (
+ <Routes>
+ <Route element={<Layout />}>
+ <Route path="/" element={<DiscoverPage />} />
+ {config.dependency.enabled && (
+ <Route
+ path="/dependency"
+ element={<DependenciesPage />}
+ />
+ )}
+ <Route
+ path="/traces/:traceId"
+ element={<TracePage />}
+ />
  <Route
- exact
- path="/dependency"
- component={DependenciesPage}
+ path="/traceViewer"
+ element={<TracePage />}
  />
- )}
- <Route
- exact
- path={['/traces/:traceId', '/traceViewer']}
- component={TracePage}
- />
- </Layout>
+ </Route>
+ </Routes>
  </BrowserRouter>
  </I18nProvider>
  </Provider>

zipkin-lens/src/components/App/Layout.tsx

@@ -39,8 +39,9 @@ import TraceJsonUploader from './TraceJsonUploader';
 import { useUiConfig } from '../UiConfig';
 import { darkTheme } from '../../constants/color';
 import logoSrc from '../../img/zipkin-logo.png';
+import { Outlet } from 'react-router-dom';
 
-const Layout: React.FC = ({ children }) => {
+const Layout: React.FC = () => {
  const { _ } = useLingui();
  const config = useUiConfig();
 
@@ -106,7 +107,7 @@ const Layout: React.FC = ({ children }) => {
  </AppBar>
  <Box component="main" width="100%">
  <ToolbarSpace />
- {children}
+ <Outlet />
  </Box>
  </Box>
  );

zipkin-lens/src/components/App/TraceIdSearch.tsx

@@ -16,11 +16,11 @@ import { msg } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
 import { TextField } from '@material-ui/core';
 import React, { useCallback, useState } from 'react';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 
 const TraceIdSearch: React.FC = () => {
  const { _ } = useLingui();
- const history = useHistory();
+ const navigate = useNavigate();
 
  const [traceId, setTraceId] = useState('');
 
@@ -34,12 +34,12 @@ const TraceIdSearch: React.FC = () => {
  const handleKeyDown = useCallback(
  (event: React.KeyboardEvent<HTMLInputElement>) => {
  if (event.key === 'Enter') {
- history.push({
+ navigate({
  pathname: `/traces/${traceId}`,
  });
  }
  },
- [history, traceId],
+ [navigate, traceId],
  );
 
  return (

zipkin-lens/src/components/App/TraceJsonUploader.tsx

@@ -1,3 +1,16 @@
+/*
+ * Copyright 2015-2024 The OpenZipkin Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License
+ * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing permissions and limitations under
+ * the License.
+ */
 import { Trans } from '@lingui/macro';
 /*
  * Copyright 2015-2020 The OpenZipkin Authors
@@ -19,15 +32,15 @@ import { IconButton, Tooltip } from '@material-ui/core';
 import { unwrapResult } from '@reduxjs/toolkit';
 import React, { useCallback, useRef } from 'react';
 import { useDispatch } from 'react-redux';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 
 import { setAlert } from './slice';
 import { loadJsonTrace } from '../../slices/tracesSlice';
 
 const TraceJsonUploader: React.FC = () => {
  const dispatch = useDispatch();
- const history = useHistory();
+ const navigate = useNavigate();
  const inputEl = useRef<HTMLInputElement>(null);
 
  const handleClick = useCallback(() => {
@@ -42,7 +55,7 @@ const TraceJsonUploader: React.FC = () => {
  dispatch(loadJsonTrace(file))
  .then(unwrapResult)
  .then(({ traceId }) => {
- history.push({
+ navigate({
  pathname: `/traces/${traceId}`,
  });
  })
@@ -55,7 +68,7 @@ const TraceJsonUploader: React.FC = () => {
  );
  });
  },
- [dispatch, history],
+ [dispatch, navigate],
  );
 
  return (