Skip to content

Commit

Permalink
Update docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@infomiho
infomiho committed Oct 1, 2024
1 parent c45752c commit b328acd
Showing 1 changed file with 155 additions and 153 deletions.
308 changes: 155 additions & 153 deletions web/docs/migration-guides/migrate-from-0-14-to-0-15.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,196 +45,198 @@ app MyApp {

### 2. Update the `package.json` file

Update the `prisma` version in your `package.json` file to `5.19.1`:
1. Update the `prisma` version in your `package.json` file to `5.19.1`:

```json title="package.json"
{
"dependencies": {
// highlight-next-line
"prisma": "5.19.1"
}
}
```
```json title="package.json"
{
"dependencies": {
// highlight-next-line
"prisma": "5.19.1"
}
}
```

1. If you have `@types/react-router-dom` in your `package.json`, you can remove it as it is no longer needed.

### 3. Use the latest React Router APIs

Update the usage of the old React Router 5 APIs to the new React Router 6 APIs.
Update the usage of the old React Router 5 APIs to the new React Router 6 APIs:

- If you used the `useHistory()` hook, you should now use the `useNavigate()` hook.
1. If you used the `useHistory()` hook, you should now use the `useNavigate()` hook.

<Tabs>
<TabItem value="before" label="Before">
<Tabs>
<TabItem value="before" label="Before">

```tsx title="src/SomePage.tsx"
import { useHistory } from 'react-router-dom'
```tsx title="src/SomePage.tsx"
import { useHistory } from 'react-router-dom'

export function SomePage() {
const history = useHistory()
const handleClick = () => {
// highlight-next-line
history.push('/new-route')
export function SomePage() {
const history = useHistory()
const handleClick = () => {
// highlight-next-line
history.push('/new-route')
}
return <button onClick={handleClick}>Go to new route</button>
}
return <button onClick={handleClick}>Go to new route</button>
}
```
```

</TabItem>
<TabItem value="after" label="After">
</TabItem>
<TabItem value="after" label="After">

```tsx title="src/SomePage.tsx"
import { useNavigate } from 'react-router-dom'
```tsx title="src/SomePage.tsx"
import { useNavigate } from 'react-router-dom'

export function SomePage() {
const navigate = useNavigate()
const handleClick = () => {
// highlight-next-line
navigate('/new-route')
export function SomePage() {
const navigate = useNavigate()
const handleClick = () => {
// highlight-next-line
navigate('/new-route')
}
return <button onClick={handleClick}>Go to new route</button>
}
return <button onClick={handleClick}>Go to new route</button>
}
```
```

</TabItem>
</Tabs>
</TabItem>
</Tabs>

Check the [React Router 6 docs](https://reactrouter.com/en/main/hooks/use-navigate#optionsreplace) for more information on the `useNavigate()` hook.
Check the [React Router 6 docs](https://reactrouter.com/en/main/hooks/use-navigate#optionsreplace) for more information on the `useNavigate()` hook.

- If you used the `<Redirect />` component, you should now use the `<Navigate />` component.
1. If you used the `<Redirect />` component, you should now use the `<Navigate />` component.

The default behaviour changed from `replace` to `push` in v6, so if you want to keep the old behaviour, you should add the `replace` prop.
The default behaviour changed from `replace` to `push` in v6, so if you want to keep the old behaviour, you should add the `replace` prop.

<Tabs>
<TabItem value="before" label="Before">
<Tabs>
<TabItem value="before" label="Before">

```tsx title="src/SomePage.tsx"
import { Redirect } from 'react-router-dom'
```tsx title="src/SomePage.tsx"
import { Redirect } from 'react-router-dom'

export function SomePage() {
return (
// highlight-next-line
<Redirect to="/new-route" />
)
}
```
export function SomePage() {
return (
// highlight-next-line
<Redirect to="/new-route" />
)
}
```

</TabItem>
<TabItem value="after" label="After">
</TabItem>
<TabItem value="after" label="After">

```tsx title="src/SomePage.tsx"
import { Navigate } from 'react-router-dom'
```tsx title="src/SomePage.tsx"
import { Navigate } from 'react-router-dom'

export function SomePage() {
return (
// highlight-next-line
<Navigate to="/new-route" replace />
)
}
```
export function SomePage() {
return (
// highlight-next-line
<Navigate to="/new-route" replace />
)
}
```

</TabItem>
</Tabs>
</TabItem>
</Tabs>

Check the [React Router 6 docs](https://reactrouter.com/en/main/components/navigate) for more information on the `<Navigate />` component.
Check the [React Router 6 docs](https://reactrouter.com/en/main/components/navigate) for more information on the `<Navigate />` component.

- If you accessed the route params using `props.match.params`, you should now use the `useParams()` hook.
1. If you accessed the route params using `props.match.params`, you should now use the `useParams()` hook.

<Tabs>
<TabItem value="before" label="Before">
<Tabs>
<TabItem value="before" label="Before">

```tsx title="src/SomePage.tsx"
import { RouteComponentProps } from 'react-router-dom'
```tsx title="src/SomePage.tsx"
import { RouteComponentProps } from 'react-router-dom'

export function SomePage(props: RouteComponentProps) {
// highlight-next-line
const { id } = props.match.params
return (
<div>
<h1>Item {id}</h1>
</div>
)
}
```
export function SomePage(props: RouteComponentProps) {
// highlight-next-line
const { id } = props.match.params
return (
<div>
<h1>Item {id}</h1>
</div>
)
}
```

</TabItem>
<TabItem value="after" label="After">
</TabItem>
<TabItem value="after" label="After">

```tsx title="src/SomePage.tsx"
import { useParams } from 'react-router-dom'
```tsx title="src/SomePage.tsx"
import { useParams } from 'react-router-dom'

export function SomePage() {
// highlight-next-line
const { id } = useParams()
return (
<div>
<h1>Item {id}</h1>
</div>
)
}
```

</TabItem>
</Tabs>

Check the [React Router 6 docs](https://reactrouter.com/en/main/hooks/use-params) for more information on the `useParams()` hook.

- If you used the `<NavLink />` component and its `isActive` prop to set the active link state, you should now set the `className` prop directly.

<Tabs>
<TabItem value="before" label="Before">

```tsx title="src/SomePage.tsx"
import { NavLink } from 'react-router-dom'

export function SomePage() {
return (
<NavLink
to="/new-route"
// highlight-start
isActive={(_match, location) => {
return location.pathname === '/new-route'
}}
// highlight-end
className={(isActive) =>
cn('text-blue-500', {
underline: isActive,
})
}
>
Go to new route
</NavLink>
)
}
```
export function SomePage() {
// highlight-next-line
const { id } = useParams()
return (
<div>
<h1>Item {id}</h1>
</div>
)
}
```

</TabItem>
</Tabs>

Check the [React Router 6 docs](https://reactrouter.com/en/main/hooks/use-params) for more information on the `useParams()` hook.

1. If you used the `<NavLink />` component and its `isActive` prop to set the active link state, you should now set the `className` prop directly.

<Tabs>
<TabItem value="before" label="Before">

```tsx title="src/SomePage.tsx"
import { NavLink } from 'react-router-dom'

export function SomePage() {
return (
<NavLink
to="/new-route"
// highlight-start
isActive={(_match, location) => {
return location.pathname === '/new-route'
}}
// highlight-end
className={(isActive) =>
cn('text-blue-500', {
underline: isActive,
})
}
>
Go to new route
</NavLink>
)
}
```

</TabItem>
<TabItem value="after" label="After">
</TabItem>
<TabItem value="after" label="After">

```tsx title="src/SomePage.tsx"
import { NavLink, useLocation } from 'react-router-dom'
```tsx title="src/SomePage.tsx"
import { NavLink, useLocation } from 'react-router-dom'

export function SomePage() {
// highlight-next-line
const location = useLocation()
return (
<NavLink
to="/new-route"
className={() =>
cn('text-blue-500', {
// highlight-next-line
underline: location.pathname === '/new-route',
})
}
>
Go to new route
</NavLink>
)
}
```
export function SomePage() {
// highlight-next-line
const location = useLocation()
return (
<NavLink
to="/new-route"
className={() =>
cn('text-blue-500', {
// highlight-next-line
underline: location.pathname === '/new-route',
})
}
>
Go to new route
</NavLink>
)
}
```

</TabItem>
</Tabs>
</TabItem>
</Tabs>

Check the [React Router 6 docs](https://reactrouter.com/en/main/components/nav-link#navlink) for more information on the `<NavLink />` component.
Check the [React Router 6 docs](https://reactrouter.com/en/main/components/nav-link#navlink) for more information on the `<NavLink />` component.

### 4. Update your root component

Expand Down

0 comments on commit b328acd

Please sign in to comment.