Skip to content

Commit dfd320c

Browse files
tuliomirtuliomir
authored
feat: Upgrades react-router to v6 (#383)
1 parent 29738c6 commit dfd320c

17 files changed

+155
-226
lines changed

‎package-lock.json‎

Lines changed: 32 additions & 73 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
"react-loading": "2.0.3",
3030
"react-paginate": "8.2.0",
3131
"react-redux": "8.1.3",
32-
"react-router-dom": "5.3.4",
32+
"react-router-dom": "6.29.0",
3333
"react-scripts": "3.4.4",
3434
"redux": "4.2.1",
3535
"sass": "1.77.8",

‎src/App.js‎

Lines changed: 52 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77

88
import React, { useCallback, useEffect } from 'react';
99

10-
import { Switch, BrowserRouter as Router, Route } from 'react-router-dom';
10+
import { BrowserRouter, Routes, Route } from 'react-router-dom';
1111
import { useDispatch, useSelector } from 'react-redux';
1212
import { axios as hathorLibAxios, config as hathorLibConfig } from '@hathor/wallet-lib';
1313
import { useTheme, useNewUiEnabled, useNewUiLoad } from './hooks';
@@ -106,12 +106,12 @@ function Root() {
106106
if (isVersionAllowed === undefined) {
107107
// Waiting for version
108108
return (
109-
<Router>
109+
<BrowserRouter>
110110
<>
111111
<Navigation />
112112
{apiLoadError ? <ErrorMessage /> : <Loading />}
113113
</>
114-
</Router>
114+
</BrowserRouter>
115115
);
116116
}
117117

@@ -125,61 +125,55 @@ function Root() {
125125

126126
return (
127127
<>
128-
<Router>
129-
<Switch>
130-
<Route exact path="/transaction/:id">
131-
<NavigationRoute internalScreen={TransactionDetail} />
132-
</Route>
133-
<Route exact path="/push-tx">
134-
<NavigationRoute internalScreen={PushTx} />
135-
</Route>
136-
<Route exact path="/decode-tx">
137-
<NavigationRoute internalScreen={DecodeTx} />
138-
</Route>
139-
<Route exact path="/transactions">
140-
<NavigationRoute internalScreen={TransactionList} />
141-
</Route>
142-
<Route exact path="/tokens">
143-
<NavigationRoute internalScreen={TokenList} />
144-
</Route>
145-
<Route exact path="/token_balances">
146-
<NavigationRoute internalScreen={TokenBalancesList} />
147-
</Route>
148-
<Route exact path="/token_balances">
149-
<NavigationRoute internalScreen={TokenBalancesList} />
150-
</Route>
151-
<Route exact path="/blocks">
152-
<NavigationRoute internalScreen={BlockList} />
153-
</Route>
154-
<Route exact path="/dag" component={Dag}>
155-
<NavigationRoute internalScreen={Dag} />
156-
</Route>
157-
<Route exact path="/features">
158-
<NavigationRoute internalScreen={FeatureList} />
159-
</Route>
160-
<Route exact path="/network/:peerId?">
161-
<NavigationRoute internalScreen={PeerAdmin} />
162-
</Route>
163-
<Route exact path="/statistics">
164-
<NavigationRoute internalScreen={Dashboard} />
165-
</Route>
166-
<Route exact path="/token_detail/:tokenUID">
167-
<NavigationRoute internalScreen={TokenDetail} />
168-
</Route>
169-
<Route exact path="/address/:address">
170-
<NavigationRoute internalScreen={AddressDetail} />
171-
</Route>
172-
<Route exact path="/nano_contract/detail/:nc_id" component={NanoContractDetail}>
173-
<NavigationRoute internalScreen={NanoContractDetail} />
174-
</Route>
175-
<Route exact path="/blueprint/detail/:blueprint_id">
176-
<NavigationRoute internalScreen={BlueprintDetail} />
177-
</Route>
178-
<Route exact path="">
179-
<NavigationRoute internalScreen={DashboardTx} />
180-
</Route>
181-
</Switch>
182-
</Router>
128+
<BrowserRouter>
129+
<Routes>
130+
<Route
131+
path="/transaction/:id"
132+
element={<NavigationRoute internalScreen={TransactionDetail} />}
133+
/>
134+
<Route path="/push-tx" element={<NavigationRoute internalScreen={PushTx} />} />
135+
<Route path="/decode-tx" element={<NavigationRoute internalScreen={DecodeTx} />} />
136+
<Route
137+
path="/transactions"
138+
element={<NavigationRoute internalScreen={TransactionList} />}
139+
/>
140+
<Route path="/tokens" element={<NavigationRoute internalScreen={TokenList} />} />
141+
<Route
142+
path="/token_balances"
143+
element={<NavigationRoute internalScreen={TokenBalancesList} />}
144+
/>
145+
<Route
146+
path="/token_balances"
147+
element={<NavigationRoute internalScreen={TokenBalancesList} />}
148+
/>
149+
<Route path="/blocks" element={<NavigationRoute internalScreen={BlockList} />} />
150+
<Route path="/dag" component={Dag} element={<NavigationRoute internalScreen={Dag} />} />
151+
<Route path="/features" element={<NavigationRoute internalScreen={FeatureList} />} />
152+
<Route
153+
path="/network/:peerId?"
154+
element={<NavigationRoute internalScreen={PeerAdmin} />}
155+
/>
156+
<Route path="/statistics" element={<NavigationRoute internalScreen={Dashboard} />} />
157+
<Route
158+
path="/token_detail/:tokenUID"
159+
element={<NavigationRoute internalScreen={TokenDetail} />}
160+
/>
161+
<Route
162+
path="/address/:address"
163+
element={<NavigationRoute internalScreen={AddressDetail} />}
164+
/>
165+
<Route
166+
path="/nano_contract/detail/:nc_id"
167+
component={NanoContractDetail}
168+
element={<NavigationRoute internalScreen={NanoContractDetail} />}
169+
/>
170+
<Route
171+
path="/blueprint/detail/:blueprint_id"
172+
element={<NavigationRoute internalScreen={BlueprintDetail} />}
173+
/>
174+
<Route path="" element={<NavigationRoute internalScreen={DashboardTx} />} />
175+
</Routes>
176+
</BrowserRouter>
183177
<GDPRConsent />
184178
</>
185179
);

‎src/components/AddressDetailExplorer.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
99
import hathorLib from '@hathor/wallet-lib';
1010
import ReactLoading from 'react-loading';
1111
import { find } from 'lodash';
12-
import { useHistory, useParams } from 'react-router-dom';
12+
import { useNavigate, useParams } from 'react-router-dom';
1313
import { useNewUiEnabled } from '../hooks';
1414
import AddressSummary from './AddressSummary';
1515
import AddressHistory from './AddressHistory';
@@ -63,7 +63,7 @@ function AddressDetailExplorer() {
6363
);
6464

6565
const { address } = useParams();
66-
const history = useHistory();
66+
const navigate = useNavigate();
6767
const newUiEnabled = useNewUiEnabled();
6868

6969
/*
@@ -380,7 +380,7 @@ function AddressDetailExplorer() {
380380
*/
381381
const updateTokenURL = token => {
382382
const newURL = pagination.current.setURLParameters({ token });
383-
history.push(newURL);
383+
navigate(newURL);
384384
};
385385

386386
/**
@@ -389,7 +389,7 @@ function AddressDetailExplorer() {
389389
* @param {String} hash Hash of tx clicked
390390
*/
391391
const onRowClicked = hash => {
392-
history.push(`/transaction/${hash}`);
392+
navigate(`/transaction/${hash}`);
393393
};
394394

395395
/**

‎src/components/AddressDetailLegacy.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -303,7 +303,7 @@ class AddressDetailLegacy extends React.Component {
303303
const queryParams = this.pagination.obtainQueryParams();
304304
queryParams.token = token;
305305
const newURL = this.pagination.setURLParameters(queryParams);
306-
this.props.history.push(newURL);
306+
this.props.navigate(newURL);
307307
};
308308

309309
/**
@@ -337,7 +337,7 @@ class AddressDetailLegacy extends React.Component {
337337
* @param {String} hash Hash of tx clicked
338338
*/
339339
onRowClicked = hash => {
340-
this.props.history.push(`/transaction/${hash}`);
340+
this.props.navigate(`/transaction/${hash}`);
341341
};
342342

343343
/**

‎src/components/ConditionalNavigation.js‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,7 @@ import { useFlag } from '@unleash/proxy-client-react';
66
const ConditionalNavigation = ({ featureToggle, to, label }) => {
77
return useFlag(featureToggle) ? (
88
<span className="nav-item">
9-
<NavLink
10-
to={to}
11-
exact
12-
className="nav-link"
13-
activeClassName="active"
14-
activeStyle={{ fontWeight: 'bold' }}
15-
>
9+
<NavLink to={to} className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`}>
1610
{label}
1711
</NavLink>
1812
</span>

0 commit comments

Comments
 (0)