Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
chore: Updated remaining docs and tests for react-router-dom v6
  • Loading branch information
mlaursen committed Nov 24, 2021
1 parent ae469ef commit e012ef9
Show file tree
Hide file tree
Showing 12 changed files with 71 additions and 185 deletions.
2 changes: 0 additions & 2 deletions package.json
Expand Up @@ -66,8 +66,6 @@
"@types/reach__router": "^1.3.9",
"@types/react": "^17.0.36",
"@types/react-dom": "^17.0.11",
"@types/react-router": "^5.1.17",
"@types/react-router-dom": "^5.3.1",
"@types/react-test-renderer": "^17.0.1",
"@types/react-transition-group": "^4.4.3",
"chokidar": "^3.5.2",
Expand Down
8 changes: 1 addition & 7 deletions packages/dev-utils/src/sandbox/createPackageJson.ts
Expand Up @@ -17,13 +17,7 @@ function toDependencyJson(
);
}

const SIMPLE_AT_TYPES = [
"qs",
"react-router",
"react-router-dom",
"react-transition-group",
"react-virtualized",
];
const SIMPLE_AT_TYPES = ["qs", "react-transition-group", "react-virtualized"];

function getTypesPackage(packageName: string): string | null {
if (SIMPLE_AT_TYPES.includes(packageName)) {
Expand Down
2 changes: 1 addition & 1 deletion packages/documentation/package.json
Expand Up @@ -37,7 +37,7 @@
"react-hook-form": "^7.20.2",
"react-marked-renderer": "^1.0.0",
"react-md": "^3.1.1",
"react-router-dom": "^5.3.0",
"react-router-dom": "^6.0.2",
"react-swipeable": "^6.2.0",
"react-transition-group": "^4.4.2",
"react-virtualized": "^9.22.3",
Expand Down
Expand Up @@ -16,7 +16,7 @@ props into the react-md `Link`:
```tsx
import { ReactElement } from "react";
import { render } from "react-dom";
import { Link as ReactRouterLink, LinkProps } from "react-router";
import { Link as ReactRouterLink, LinkProps } from "react-router-dom";
import { Link as ReactMDLink } from "@react-md/link";

function Link(props: LinkProps): ReactElement {
Expand Down
14 changes: 7 additions & 7 deletions packages/layout/README.md
Expand Up @@ -88,8 +88,8 @@ import { Text } from "@react-md/typography";
import {
BrowserRouter,
Link,
Routes,
Route,
Switch,
useLocation,
} from "react-router-dom";

Expand Down Expand Up @@ -149,12 +149,12 @@ function App(): ReactElement {
navHeaderTitle="Example Nav Title"
treeProps={useLayoutNavigation(navItems, pathname, Link)}
>
<Switch>
<Route path="/route-1" component={Route1} />
<Route path="/route-2" component={Route2} />
<Route path="/route-3" component={Route3} />
<Route path="/" component={Home} />
</Switch>
<Routes>
<Route path="/" element={<Home />} />
<Route path="route-1" element={<Route1 />} />
<Route path="route-2" element={<Route2 />} />
<Route path="route-3" element={<Route3 />} />
</Routes>
</Layout>
);
}
Expand Down
2 changes: 1 addition & 1 deletion packages/layout/package.json
Expand Up @@ -53,7 +53,7 @@
"devDependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.1",
"react-router-dom": "^5.3.0"
"react-router-dom": "^6.0.2"
},
"peerDependencies": {
"react": ">= 16.14",
Expand Down
49 changes: 20 additions & 29 deletions packages/layout/src/__tests__/Layout.tsx
Expand Up @@ -4,7 +4,7 @@ import {
Link,
BrowserRouter,
useLocation,
Switch,
Routes,
Route,
} from "react-router-dom";
import { mocked } from "ts-jest/utils";
Expand Down Expand Up @@ -498,6 +498,18 @@ describe("Layout", () => {

describe("navigation behavior", () => {
it("should work with react-router", () => {
function Route2(): ReactElement {
return (
<>
<h1>Route 2</h1>
<Routes>
<Route path="1" element={<h2>Route 2-1</h2>} />
<Route path="2" element={<h2>Route 2-2</h2>} />
<Route path="3" element={<h2>Route 2-3</h2>} />
</Routes>
</>
);
}
function Test(): ReactElement {
const { pathname } = useLocation();
return (
Expand All @@ -508,34 +520,13 @@ describe("Layout", () => {
Link
)}
>
<Switch>
<Route path="/" exact>
<h1>Home</h1>
</Route>
<Route path="/route-1">
<h1>Route 1</h1>
</Route>
<Route path="/route-2">
<h1>Route 2</h1>
<Switch>
<Route path="/route-2/1">
<h2>Route 2-1</h2>
</Route>
<Route path="/route-2/2">
<h2>Route 2-2</h2>
</Route>
<Route path="/route-2/3">
<h2>Route 2-3</h2>
</Route>
</Switch>
</Route>
<Route path="/route-3">
<h1>Route 3</h1>
</Route>
<Route path="/route-4">
<h1>Route 4</h1>
</Route>
</Switch>
<Routes>
<Route path="/" element={<h1>Home</h1>} />
<Route path="route-1" element={<h1>Route 1</h1>} />
<Route path="route-2/*" element={<Route2 />} />
<Route path="route-3" element={<h1>Route 3</h1>} />
<Route path="route-4" element={<h1>Route 4</h1>} />
</Routes>
</Layout>
);
}
Expand Down
8 changes: 6 additions & 2 deletions packages/link/README.md
Expand Up @@ -43,6 +43,8 @@ import {
Link as ReactRouterLink,
LinkProps as ReactRouterLinkProps,
BrowserRouter,
Routes,
Route,
} from "react-router-dom";
import { Link as ReactMDLink, LinkProps as RMDLinkProps } from "@react-md/link";

Expand All @@ -66,8 +68,10 @@ function App(): ReactElement {
<Link to="/">Home</Link>
<Link to="/about">About</Link>

<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Routes>
<Route path="/" element={<Home />} />
<Route path="about" element={<About />} />
</Routes>
</BrowserRouter>
);
}
Expand Down
2 changes: 1 addition & 1 deletion packages/link/package.json
Expand Up @@ -40,7 +40,7 @@
"@reach/router": "^1.3.4",
"react": "^17.0.2",
"react-dom": "^17.0.1",
"react-router-dom": "^5.3.0"
"react-router-dom": "^6.0.2"
},
"peerDependencies": {
"react": ">= 16.14",
Expand Down
5 changes: 3 additions & 2 deletions packages/link/src/__tests__/Link.tsx
@@ -1,6 +1,7 @@
import { Link as ReachLink } from "@reach/router";
import { render } from "@testing-library/react";
import { Link as ReactRouterLink, StaticRouter } from "react-router-dom";
import { Link as ReactRouterLink } from "react-router-dom";
import { StaticRouter } from "react-router-dom/server";
import renderer from "react-test-renderer";

import { Link } from "../Link";
Expand All @@ -27,7 +28,7 @@ describe("Link", () => {
[key: string]: any;
}) =>
renderer.create(
<StaticRouter context={{}}>
<StaticRouter location="/">
<Link {...props} component={ReactRouterLink}>
{children}
</Link>
Expand Down
16 changes: 8 additions & 8 deletions packages/transition/src/useCSSTransition.ts
Expand Up @@ -55,10 +55,10 @@ export type CSSTransitionReturnValue<E extends HTMLElement> = [
*
* return (
* <div {...transitionProps}>
* <Switch>
* <Route path="/" component={Home} />
* <Route path="/other" component={Other} />
* </Switch>
* <Routes>
* <Route path="/" element={<Home />} />
* <Route path="other" element={<Other />} />
* </Routes>
* </div>
* );
* ```
Expand All @@ -79,10 +79,10 @@ export type CSSTransitionReturnValue<E extends HTMLElement> = [
*
* return (
* <div {...transitionProps}>
* <Switch>
* <Route path="/" component={Home} />
* <Route path="/other" component={Other} />
* </Switch>
* <Routes>
* <Route path="/" element={<Home />} />
* <Route path="other" element={<Other />} />
* </Routes>
* </div>
* );
* ```
Expand Down

1 comment on commit e012ef9

@vercel
Copy link

@vercel vercel bot commented on e012ef9 Nov 24, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.