Skip to content

Commit

Permalink
[docs] Fix 404 link from Joy to React Router (#34115)
Browse files Browse the repository at this point in the history
  • Loading branch information
oliviertassinari authored Aug 29, 2022
1 parent b18dc87 commit 463b9e0
Show file tree
Hide file tree
Showing 4 changed files with 11 additions and 14 deletions.
16 changes: 8 additions & 8 deletions docs/data/joy/components/link/link.md
Original file line number Diff line number Diff line change
Expand Up @@ -87,28 +87,28 @@ Here's how you can use the link component with libraries that also provide their

### Next.js

Based on the [Links API reference documentation](https://nextjs.org/docs/api-reference/next/link#if-the-child-is-a-custom-component-that-wraps-an-a-tag).
Here is an example with the [Link component](https://nextjs.org/docs/api-reference/next/link) of Next.js:

```js
import NextLink from 'next/link';
import JoyLink from '@mui/joy/Link';
import Link from '@mui/joy/Link';

<NextLink href="/docs" passHref>
<JoyLink>Read doc</JoyLink>
<Link>Read doc</Link>
</NextLink>;
```

### React router
### React Router

Based on the [Link found in React router's latets version](https://reactrouter.com/docs/en/v6/components/link).
Here is an example with the [Link component](https://reactrouter.com/en/main/components/link) of React Router:

```js
import { Link as RouterLink } from 'react-router-dom';
import JoyLink from '@mui/joy/Link';
import Link from '@mui/joy/Link';

<JoyLink component={RouterLink} to="/docs">
<Link component={RouterLink} to="/docs">
Read doc
</JoyLink>;
</Link>;
```

## Common examples
Expand Down
3 changes: 1 addition & 2 deletions docs/data/material/guides/routing/routing.md
Original file line number Diff line number Diff line change
Expand Up @@ -99,8 +99,7 @@ const LinkBehavior = React.forwardRef((props, ref) => (

### Next.js

Next.js has [a custom Link component](https://nextjs.org/docs/api-reference/next/link).
The [example folder](https://github.com/mui/material-ui/tree/HEAD/examples/nextjs-with-typescript) provides adapters for usage with MUI.
The [example folder](https://github.com/mui/material-ui/tree/HEAD/examples/nextjs-with-typescript) provides an adapter for the use of [Next.js's Link component](https://nextjs.org/docs/api-reference/next/link) with MUI.

- The first version of the adapter is the [`NextLinkComposed`](https://github.com/mui/material-ui/blob/HEAD/examples/nextjs-with-typescript/src/Link.tsx) component.
This component is unstyled and only responsible for handling the navigation.
Expand Down
3 changes: 1 addition & 2 deletions examples/nextjs-with-typescript/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,7 @@ It includes `@mui/material` and its peer dependencies, including `emotion`, the

## The link component

Next.js has [a custom Link component](https://nextjs.org/docs/api-reference/next/link).
The example folder provides adapters for usage with MUI.
The [example folder](https://github.com/mui/material-ui/tree/HEAD/examples/nextjs-with-typescript) provides an adapter for the use of [Next.js's Link component](https://nextjs.org/docs/api-reference/next/link) with MUI.
More information [in the documentation](https://mui.com/material-ui/guides/routing/#next-js).

## What's next?
Expand Down
3 changes: 1 addition & 2 deletions examples/nextjs/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,7 @@ If you prefer, you can [use styled-components instead](https://mui.com/material-

## The link component

Next.js has [a custom Link component](https://nextjs.org/docs/api-reference/next/link).
The example folder provides adapters for usage with MUI.
The [example folder](https://github.com/mui/material-ui/tree/HEAD/examples/nextjs-with-typescript) provides an adapter for the use of [Next.js's Link component](https://nextjs.org/docs/api-reference/next/link) with MUI.
More information [in the documentation](https://mui.com/material-ui/guides/routing/#next-js).

## What's next?
Expand Down

0 comments on commit 463b9e0

Please sign in to comment.