v0.10.0 brings some big changes to support the future of routing including Islands/Partial Hydration hybrid solutions.
Most notably there is no Context API available in non-hydrating parts of the application.

The biggest changes are around *removed APIs* that need to be replaced.

## `<Outlet>`, `<Routes>`, `useRoutes`

These components are no longer present in the new router version. Instead, `props.children` is passed into the page components in the place of outlets.
This keeps the outlet directly passed from its page and avoids trying to use context across Islands boundaries.
Similarly, nested `<Routes>` components cause waterfalls and are `<Outlets>` themselves thus sharing the same concerns.

With no `<Routes>` means the `<Router>` API has changed.
The `<Router>` component acts as the `<Routes>` component now and its children must now be `<Route>` components.
The top-level layout should go in the root prop of the router [as shown here](/solid-router/concepts/layouts#root-level-layouts).

## `element` prop removed from `Route`

Related without Outlet component it has to be passed in manually.
At which point the `element` prop has less value.
Removing the second way to define route components to reduce confusion and edge cases.

## `data` functions & `useRouteData`

`data` functions & `useRouteData` have been replaced by a load mechanism.
This allows link hover preloads, since the preload function can be run as much as wanted without worrying about reactivity.

This supports deduping/cache APIs which give more control over how things are cached.
It also addresses TypeScript issues with getting the right types in the Component without `typeof` checks.

That being said the old pattern can be reproduced by turning off preloads at the router level and then injecting your own Context:

```js
import { lazy } from "solid-js";
import { Router, Route } from "@solidjs/router";

const User = lazy(() => import("./pages/users/[id].js"));

// preload function
function preloadUser({ params, location }) {
	const [user] = createResource(() => params.id, fetchUser);
	return user;
}

// Pass it in the route definition
<Router preload={false}>
	<Route path="/users/:id" component={User} preload={preloadUser} />
</Router>;
```

And then in your component taking the page props and putting them in a Context.

```js
import { createContext, useContext } from "solid-js";

const UserContext = createContext();

function User(props) {
	<UserContext.Provider value={props.data()}>
		{/* my component content that includes <UserDetails /> in any depth  */}
	</UserContext.Provider>;
}

function UserDetails() {
	const user = useContext(UserContext);
	// render stuff
}
```