https://github.com/penghuili/react-baby-router

👶Such a simple react router.
https://github.com/penghuili/react-baby-router

react react-router router

Last synced: 3 months ago
JSON representation

👶Such a simple react router.

• Host: GitHub
• URL: https://github.com/penghuili/react-baby-router
• Owner: penghuili
• Created: 2024-09-01T14:03:41.000Z (4 months ago)
• Default Branch: master
• Last Pushed: 2024-09-24T11:11:19.000Z (3 months ago)
• Last Synced: 2024-09-28T14:41:24.293Z (3 months ago)
• Topics: react, react-router, router
• Language: JavaScript
• Homepage:
• Size: 25.4 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml

Awesome Lists containing this project

README

        
# react-baby-router

Such a simple react router. I guess this is the simplest react router in the world.

## Limitations

- No path params, you have to use query params;

- No nested route;

## Installation

```

npm install react-baby-router

```

## Usage

### Structure your router:

```

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).

```

```

### Navigate anywhere within your app:

```

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();

```

### Navigate with a component:

```

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 {children};

});

function MyComponent() {

  return (

    <>

      All my notes.

      And this is my Account

    >

  )

}

```

That's everything.

See how I use **react-baby-router** in [easyy.click](https://github.com/penghuili/easyy.click) and [notenote.cc](https://github.com/penghuili/notenotecc)

You may noticed the `useCat` hook above, that's my simplest react state management lib: [usecat](https://github.com/penghuili/usecat)