Skip to content

Commit 929911c

Browse files
nstepiennstepien
authored
react-router-dom@6 (adazzle#2832)
* react-router-dom@6 * disable rogue lint issue * fix types
1 parent b7ad586 commit 929911c

File tree

4 files changed

+50
-80
lines changed

4 files changed

+50
-80
lines changed

‎.eslintrc.cjs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -574,7 +574,7 @@ const rules = {
574574
'@typescript-eslint/no-unnecessary-boolean-literal-compare': 1,
575575
'@typescript-eslint/no-unnecessary-condition': 1,
576576
'@typescript-eslint/no-unnecessary-qualifier': 0,
577-
'@typescript-eslint/no-unnecessary-type-arguments': 1,
577+
'@typescript-eslint/no-unnecessary-type-arguments': 0,
578578
'@typescript-eslint/no-unnecessary-type-assertion': 1,
579579
'@typescript-eslint/no-unnecessary-type-constraint': 1,
580580
'@typescript-eslint/no-unsafe-argument': 0,

‎package.json

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,6 @@
6868
"@types/lodash": "^4.14.178",
6969
"@types/react": "^17.0.38",
7070
"@types/react-dom": "^17.0.11",
71-
"@types/react-router-dom": "^5.3.2",
7271
"@typescript-eslint/eslint-plugin": "^5.10.0",
7372
"@typescript-eslint/parser": "^5.10.0",
7473
"babel-loader": "^8.2.3",
@@ -100,7 +99,7 @@
10099
"react-dnd-html5-backend": "^15.1.1",
101100
"react-dom": "^17.0.2",
102101
"react-refresh": "^0.11.0",
103-
"react-router-dom": "^5.3.0",
102+
"react-router-dom": "^6.2.1",
104103
"rollup": "^2.63.0",
105104
"rollup-plugin-postcss": "^4.0.2",
106105
"style-loader": "^3.3.1",

‎website/Nav.tsx

Lines changed: 22 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -75,58 +75,58 @@ export default function Nav({ direction, onDirectionChange }: Props) {
7575
<h1>react-data-grid</h1>
7676

7777
<h2>Demos</h2>
78-
<NavLink to="/common-features" exact activeClassName={activeNavClassname}>
78+
<NavLink to="/common-features" end className={getActiveClassname}>
7979
Common Features
8080
</NavLink>
81-
<NavLink to="/all-features" exact activeClassName={activeNavClassname}>
81+
<NavLink to="/all-features" end className={getActiveClassname}>
8282
All Features
8383
</NavLink>
84-
<NavLink to="/cell-navigation" exact activeClassName={activeNavClassname}>
84+
<NavLink to="/cell-navigation" end className={getActiveClassname}>
8585
Cell Navigation
8686
</NavLink>
87-
<NavLink to="/column-spanning" exact activeClassName={activeNavClassname}>
87+
<NavLink to="/column-spanning" end className={getActiveClassname}>
8888
Column Spanning
8989
</NavLink>
90-
<NavLink to="/columns-reordering" exact activeClassName={activeNavClassname}>
90+
<NavLink to="/columns-reordering" end className={getActiveClassname}>
9191
Columns Reordering
9292
</NavLink>
93-
<NavLink to="/context-menu" exact activeClassName={activeNavClassname}>
93+
<NavLink to="/context-menu" end className={getActiveClassname}>
9494
Context Menu
9595
</NavLink>
96-
<NavLink to="/customizable-components" exact activeClassName={activeNavClassname}>
96+
<NavLink to="/customizable-components" end className={getActiveClassname}>
9797
Customizable Components
9898
</NavLink>
99-
<NavLink to="/grouping" exact activeClassName={activeNavClassname}>
99+
<NavLink to="/grouping" end className={getActiveClassname}>
100100
Grouping
101101
</NavLink>
102-
<NavLink to="/header-filters" exact activeClassName={activeNavClassname}>
102+
<NavLink to="/header-filters" end className={getActiveClassname}>
103103
Header Filters
104104
</NavLink>
105-
<NavLink to="/infinite-scrolling" exact activeClassName={activeNavClassname}>
105+
<NavLink to="/infinite-scrolling" end className={getActiveClassname}>
106106
Infinite Scrolling
107107
</NavLink>
108-
<NavLink to="/master-detail" exact activeClassName={activeNavClassname}>
108+
<NavLink to="/master-detail" end className={getActiveClassname}>
109109
Master Detail
110110
</NavLink>
111-
<NavLink to="/million-cells" exact activeClassName={activeNavClassname}>
111+
<NavLink to="/million-cells" end className={getActiveClassname}>
112112
A Million Cells
113113
</NavLink>
114-
<NavLink to="/no-rows" exact activeClassName={activeNavClassname}>
114+
<NavLink to="/no-rows" end className={getActiveClassname}>
115115
No Rows
116116
</NavLink>
117-
<NavLink to="/resizable-grid" exact activeClassName={activeNavClassname}>
117+
<NavLink to="/resizable-grid" end className={getActiveClassname}>
118118
Resizable Grid
119119
</NavLink>
120-
<NavLink to="/rows-reordering" exact activeClassName={activeNavClassname}>
120+
<NavLink to="/rows-reordering" end className={getActiveClassname}>
121121
Rows Reordering
122122
</NavLink>
123-
<NavLink to="/scroll-to-row" exact activeClassName={activeNavClassname}>
123+
<NavLink to="/scroll-to-row" end className={getActiveClassname}>
124124
Scroll To Row
125125
</NavLink>
126-
<NavLink to="/tree-view" exact activeClassName={activeNavClassname}>
126+
<NavLink to="/tree-view" end className={getActiveClassname}>
127127
Tree View
128128
</NavLink>
129-
<NavLink to="/variable-row-height" exact activeClassName={activeNavClassname}>
129+
<NavLink to="/variable-row-height" end className={getActiveClassname}>
130130
Variable Row Height
131131
</NavLink>
132132

@@ -168,3 +168,7 @@ export default function Nav({ direction, onDirectionChange }: Props) {
168168
</nav>
169169
);
170170
}
171+
172+
function getActiveClassname({ isActive }: { isActive: boolean }) {
173+
return isActive ? activeNavClassname : '';
174+
}

‎website/root.tsx

Lines changed: 26 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { StrictMode, useState } from 'react';
22
import { render } from 'react-dom';
33
import { css } from '@linaria/core';
4-
import { HashRouter as Router, Switch, Redirect, Route } from 'react-router-dom';
4+
import { HashRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
55

66
import type { Direction } from '../src/types';
77
import Nav from './Nav';
@@ -88,64 +88,31 @@ function Root() {
8888
<Router>
8989
<Nav direction={direction} onDirectionChange={setDirection} />
9090
<main className={mainClassname} dir={direction}>
91-
<Switch>
92-
<Redirect exact from="/" to="/common-features" />
93-
<Route exact path="/common-features">
94-
<CommonFeatures direction={direction} />
95-
</Route>
96-
<Route exact path="/all-features">
97-
<AllFeatures direction={direction} />
98-
</Route>
99-
<Route exact path="/cell-navigation">
100-
<CellNavigation direction={direction} />
101-
</Route>
102-
<Route exact path="/column-spanning">
103-
<ColumnSpanning direction={direction} />
104-
</Route>
105-
<Route exact path="/columns-reordering">
106-
<ColumnsReordering direction={direction} />
107-
</Route>
108-
<Route exact path="/context-menu">
109-
<ContextMenuDemo direction={direction} />
110-
</Route>
111-
<Route exact path="/customizable-components">
112-
<CustomizableComponents direction={direction} />
113-
</Route>
114-
<Route exact path="/grouping">
115-
<Grouping direction={direction} />
116-
</Route>
117-
<Route exact path="/header-filters">
118-
<HeaderFilters direction={direction} />
119-
</Route>
120-
<Route exact path="/infinite-scrolling">
121-
<InfiniteScrolling direction={direction} />
122-
</Route>
123-
<Route exact path="/master-detail">
124-
<MasterDetail direction={direction} />
125-
</Route>
126-
<Route exact path="/million-cells">
127-
<MillionCells direction={direction} />
128-
</Route>
129-
<Route exact path="/no-rows">
130-
<NoRows direction={direction} />
131-
</Route>
132-
<Route exact path="/resizable-grid">
133-
<ResizableGrid direction={direction} />
134-
</Route>
135-
<Route exact path="/rows-reordering">
136-
<RowsReordering direction={direction} />
137-
</Route>
138-
<Route exact path="/scroll-to-row">
139-
<ScrollToRow direction={direction} />
140-
</Route>
141-
<Route exact path="/tree-view">
142-
<TreeView direction={direction} />
143-
</Route>
144-
<Route exact path="/variable-row-height">
145-
<VariableRowHeight direction={direction} />
146-
</Route>
147-
<Route>Nothing to see here</Route>
148-
</Switch>
91+
<Routes>
92+
<Route index element={<Navigate to="common-features" replace />} />
93+
<Route path="common-features" element={<CommonFeatures direction={direction} />} />
94+
<Route path="all-features" element={<AllFeatures direction={direction} />} />
95+
<Route path="cell-navigation" element={<CellNavigation direction={direction} />} />
96+
<Route path="column-spanning" element={<ColumnSpanning direction={direction} />} />
97+
<Route path="columns-reordering" element={<ColumnsReordering direction={direction} />} />
98+
<Route path="context-menu" element={<ContextMenuDemo direction={direction} />} />
99+
<Route
100+
path="customizable-components"
101+
element={<CustomizableComponents direction={direction} />}
102+
/>
103+
<Route path="grouping" element={<Grouping direction={direction} />} />
104+
<Route path="header-filters" element={<HeaderFilters direction={direction} />} />
105+
<Route path="infinite-scrolling" element={<InfiniteScrolling direction={direction} />} />
106+
<Route path="master-detail" element={<MasterDetail direction={direction} />} />
107+
<Route path="million-cells" element={<MillionCells direction={direction} />} />
108+
<Route path="no-rows" element={<NoRows direction={direction} />} />
109+
<Route path="resizable-grid" element={<ResizableGrid direction={direction} />} />
110+
<Route path="rows-reordering" element={<RowsReordering direction={direction} />} />
111+
<Route path="scroll-to-row" element={<ScrollToRow direction={direction} />} />
112+
<Route path="tree-view" element={<TreeView direction={direction} />} />
113+
<Route path="variable-row-height" element={<VariableRowHeight direction={direction} />} />
114+
<Route path="*" element="Nothing to see here" />
115+
</Routes>
149116
</main>
150117
</Router>
151118
);

0 commit comments

Comments
 (0)