How can I use Ziggy with React and Inertia ?

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.

My stack is Laravel 8, Inertia & React.

Thanks !

[bakerkretzmar]

You can import the route() function either from Ziggy’s vendor directory, with something like

resolve: {
    alias: {
        ziggy: path.resolve('vendor/tightenco/ziggy/src/js/route.js'),
    },
}

added to your Webpack config, or by installing the ziggy-js npm package.

Ziggy provides an artisan command, php artisan ziggy:generate, that will generate the object with all of your route information and put it either at resources/assets/js/ziggy.js or at the path you pass it.

After doing those two things, you should be able to just

import route from 'ziggy'; // or `ziggy-js` if you use the npm package
import Ziggy from './ziggy'; // path to the file generated by the artisan command

and use route() normally.

Take a look at the Artisan Command section in the readme too.

I’m going to close this but let me know if that works and if you have any other questions!

[bakerkretzmar]

@caturandi-labs https://vitejs.dev/config/#resolve-alias