How to use Ziggy with React and Inertia

Question

How can I call in a React component the JavaScript route function generated by the Ziggy's @route directive ?

The route function is generated at runtime so it's impossible to import it beforehand in the react component and therefore, Laravel Mix throws an error and can't compile the project. To be clearer, since i'm using Typescript, I can't compile my component without importing the route function somehow.

My stack is Laravel 8, Inertia, React.

What's the error thrown? I'm working with ziggy and react with no problems. — chuysbz
– chuysbz, Commented Sep 22, 2020 at 20:50
The ziggy route() function is defined globally so you can access it anywhere in your react component. — chuysbz
– chuysbz, Commented Sep 22, 2020 at 21:02

Gordon Tang · Accepted Answer · 2022-01-23 12:10:47Z

2

I encountered the same problem and here is my solution to use ziggy-js in typescript.

import route from 'ziggy-js'
install @types/ziggy-js as you're using typescript with npm install --save-dev @types/ziggy-js

edited Jan 23, 2022 at 12:10

answered Jan 22, 2022 at 4:59

Gordon Tang

545 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ronald Araújo Over a year ago

And don't forget to do it github.com/tighten/ziggy#installation

Jamous Anas · Accepted Answer · 2020-11-15 13:04:02Z

1

In your app.blade.php make sure to pass @route as it is in the head section. ie: ` some links here @route --> pass it here

` then you can access it in your component: 1-import route from "ziggy-js"; 2-import { InertiaLink } from "@inertiajs/inertia-react";

<InertiaLinkhref={route("your_route_name", { key: value }).url()}>View</InertiaLink>

Let me know if that helps you out.

answered Nov 15, 2020 at 13:04

Jamous Anas

213 bronze badges

Collectives™ on Stack Overflow

How to use Ziggy with React and Inertia

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related