1.1.11 • Published 8 months ago
react-named-hooks-router v1.1.11
react-named-hooks-router
react-named-hooks-router is as simple react router with hooks and named routes.
- No need to write the url, just the name of the route
- At any time you can get a full description of the current route with all params
- pushRoute method for programmatic navigation
- beforeUnload event with resolve function
- Full typescript support
Usage
index.tsx
import { Router } from 'react-named-hooks-router';
import NotFoundPage from 'components/NotFoundPage';
import HomePage from 'components/HomePage';
import UserPage from 'components/UserPage';
import PhotosPage from 'components/PhotosPage';
const routes = [
{name: 'home', path: '/', page: HomePage},
{name: 'user', path: '/user/:id', page: UserPage}, // dynamic segment
{name: 'photos', path: '/photos/*path', page: PhotosPage}, // wildcard segment
];
const handleLoadPage = (routeName: string) => {
console.log(routeName + 'is loaded!');
}
ReactDOM.render(<Router routes={routes} notFoundPage={<NotFoundPage />} onLoadPage={handleLoadPage} />, document.getElementById('root'));
UserPage.tsx
import {useRouter, Link} from 'react-named-hooks-router';
const UserPage = () => {
// First parameter is onBeforeUnload
const [test, setTest] = useState(false);
const [navigateCallback, setNavigateCallback] = useState();
const handleBeforeUnload = useCallabck(navigate => {
if (test) navigate();
else setNavigateCallback(() => navigate);
}, [test]);
// Generic for routeParams
// Callback for beforeUnload effect
const {routeName, routeParams, pushRoute} = useRouter<{id: number}>(handleBeforeUnload);
return (
<div>
<p>This is {routeName} {routeParams.id}</p>
<Link route="user" params={{id: 2}}>User 2</Link>
{/* Query string parameters as deep objects */}
<Link route="user" params={{id: 2, user: {name: 'Bob', data: {age: 3, login: 'bob35'}}}}>User 2</Link> {/* Resolve to /user/2?user.name=Bob&user.data.age=3&user.data.login=bob35 */}
<button type="button" onClick={() => pushRoute('home')}>Home Page</button>
<ModalPopup open={!!setNavigateCallback}>Leave page?<br /><button type="button" onClick={() => navigateCallback()}>Yes!</button></ModalPopup>
</div>
);
};
export default UserPage;
1.1.11
8 months ago
1.1.10
12 months ago
1.1.9
2 years ago
1.1.8
2 years ago
1.1.7
3 years ago
1.1.6
4 years ago
1.1.5
4 years ago
1.1.4
4 years ago
1.1.3
4 years ago
1.1.2
4 years ago
1.1.1
5 years ago
1.1.0
5 years ago
1.0.12
5 years ago
1.0.11
5 years ago
1.0.9
5 years ago
1.0.8
5 years ago
1.0.7
5 years ago
1.0.6
5 years ago
1.0.5
5 years ago
1.0.4
5 years ago
1.0.3
5 years ago
1.0.2
5 years ago
1.0.1
5 years ago
1.0.0
5 years ago