Closed mellis481 closed 2 years ago
If you reference the readme:
💁 Note: This is not a preact-compatible version of React Router. preact-router is a simple URL wiring and does no orchestration for you.
If you're looking for more complex solutions like nested routes and view composition, react-router works great with preact as long as you alias in preact/compat.
It doesn't match because it's not intended to.
Here's an example of a type-safe way to do an authenticated route:
import { FunctionalComponent, h, VNode } from 'preact';
import { useEffect } from 'preact/hooks';
import { Route, route, Router } from 'preact-router';
const AuthenticatedRoute = (props: { path: string; component: FunctionalComponent<any> }): VNode => {
const isAuthenticated = checkIsAuthenticated();
useEffect(() => {
if (!isAuthenticated) route('/auth/login', true);
}, [isAuthenticated]);
return <Route {...props} />;
};
const App: FunctionalComponent = () => {
return (
<div id="app">
<Router>
<AuthenticatedRoute path="/" component={Home} />
</Router>
</div>
);
};
I'm working to create a protected route component in my Preact app. This can be done in a React app that uses react-router like this:
In react-router,
RouteProps
is defined like this and does not use generics or require a type to be defined:I'm trying to use this code to create the protected route component in my Preact app like this:
This results in a type/compilation error because preact-router defines
RouteProps
like this:Why does preact-router's
RouteProps
not match react-router'sRouteProps
?