Such a simple react router.
npm install react-baby-router
npm install react-baby-router
`
Usage
$3
`
import { BabyRoutes } from 'react-baby-router';
import React from 'react';
import { Account } from './views/Account.jsx';
import { Notes } from './views/Notes.jsx';
import { NoteDetails } from './views/NoteDetails.jsx';
import { SignUp } from './views/SignUp.jsx';
import { SignIn } from './views/SignIn.jsx';
import { ResetPassword } from './views/ResetPassword.jsx';
import { Welcome } from './views/Welcome.jsx';
const loggedInRoutes = {
'/account': Account,
'/note-details': NoteDetails,
'/': Notes,
};
const publicRoutes = {
'/sign-up': SignUp,
'/sign-in': SignIn,
'/reset-password': ResetPassword,
'/': Welcome,
};
export const Router = React.memo(() => {
const isLoggedIn = useCat(isLoggedInCat);
if (isLoggedIn) {
return ;
}
return ;
});
`
Use enableAnimation to control page transition animation (enabled by default).
`
`
$3
`
import { navigateTo, replaceTo, goBack } from 'react-baby-router';
// This will add an item to the browser history
navigateTo('/note-details?noteId=123456');
...
// This will replace the current page, without adding an item to browser history
replaceTo('/account');
// go back
goBack();
`
$3
`
import { Button } from '@radix-ui/themes';
import { BabyLink } from 'react-baby-router';
import React from 'react';
// Use your own link component
const RouteLink = React.memo(({ to, children }) => {
return ;
});
function MyComponent() {
return (
<>
All my notes.
And this is my Account
>
)
}
`
That's everything.
See how I use react-baby-router in notenote.cc
You may noticed the useCat` hook above, that's my simplest react state management lib: usecat