web/versioned_docs/version-0.21/migration-guides/migrate-from-0-14-to-0-15.md
Wasp 0.15.0 brings upgrades to some of Wasp's most important dependencies. Let's see what's new.
Wasp is now using the latest Prisma 5, which brings a lot of performance improvements and new features.
From the Prisma docs:
Prisma ORM 5.0.0 introduces a number of changes, including the usage of our new JSON Protocol, which make Prisma Client faster by default.
This means that your Wasp app will be faster and more reliable with the new Prisma 5 version.
Wasp also upgraded its React Router version from 5.3.4 to 6.26.2. This means that we are now using the latest React Router version, which brings us up to speed and opens up new possibilities for Wasp e.g. potentially using loaders and actions in the future.
There are some breaking changes in React Router 6, so you will need to update your app to use the new hooks and components.
To migrate your Wasp app from 0.14.X to 0.15.X, follow these steps:
Update the version field in your Wasp file to ^0.15.0:
app MyApp {
wasp: {
// highlight-next-line
version: "^0.15.0"
},
}
package.json fileUpdate the prisma version in your package.json file to 5.19.1, and add "type": "module" to the top level:
{
...
// highlight-next-line
"type": "module",
"devDependencies": {
....
// highlight-next-line
"prisma": "5.19.1"
}
...
}
If you have @types/react-router-dom in your package.json, you can remove it as it is no longer needed.
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.
export function SomePage() {
const history = useHistory()
const handleClick = () => {
// highlight-next-line
history.push('/new-route')
}
return <button onClick={handleClick}>Go to new route</button>
}
```
export function SomePage() {
const navigate = useNavigate()
const handleClick = () => {
// highlight-next-line
navigate('/new-route')
}
return <button onClick={handleClick}>Go to new route</button>
}
```
Check the React Router 6 docs for more information on the useNavigate() hook.
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.
export function SomePage() {
return (
// highlight-next-line
<Redirect to="/new-route" />
)
}
```
export function SomePage() {
return (
// highlight-next-line
<Navigate to="/new-route" replace />
)
}
```
Check the React Router 6 docs for more information on the <Navigate /> component.
If you accessed the route params using props.match.params, you should now use the useParams() hook.
export function SomePage(props: RouteComponentProps) {
// highlight-next-line
const { id } = props.match.params
return (
<div>
<h1>Item {id}</h1>
</div>
)
}
```
export function SomePage() {
// highlight-next-line
const { id } = useParams()
return (
<div>
<h1>Item {id}</h1>
</div>
)
}
```
Check the React Router 6 docs 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.
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 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>
)
}
```
Check the React Router 6 docs for more information on the <NavLink /> component.
The client.rootComponent now requires rendering <Outlet /> instead the children prop.
```tsx title="src/App.tsx"
export function App({ children }: { children: React.ReactNode }) {
return (
<div>
<header>
<h1>My App</h1>
</header>
// highlight-next-line
{children}
<footer>
<p>My App footer</p>
</footer>
</div>
)
}
```
```tsx title="src/App.tsx"
import { Outlet } from 'react-router-dom'
export function App() {
return (
<div>
<header>
<h1>My App</h1>
</header>
// highlight-next-line
<Outlet />
<footer>
<p>My App footer</p>
</footer>
</div>
)
}
```
That's it!
You should now be able to run your app with the new Wasp 0.15.0.