09 REACT ROUTER

This npm package provides a custom version of the Router, Route, and Link components for React. These components are designed to be lightweight, flexible, and easy to use, allowing you to handle client-side routing in your React applications efficiently.

Installation

You can install the package using npm or yarn:

npm i 09-react-router

# or

yarn i 09-react-router

Usage

To use React Router components, follow these steps:

1. Import the components:

import { Router, Route, Link } from '09-react-router'

2. Set up your routing in your applicaction:

export function App() {
    return (
    <Router>
      <Route
        path="/"
        Component={() => {
          return (
            <>
              <h1>Home</h1>
              <nav>
                <ul>
                  <li>
                    <Link to="/">Home</Link>
                  </li>
                  <li>
                    <Link to="/about">About</Link>
                  </li>
                  <li>
                    <Link to="/contact">Contact</Link>
                  </li>
                </ul>
              </nav>
            </>
          );
        }}
      />
      <Route
        path="/about"
        Component={() => {
          return (
            <>
              <h1>About</h1>
              <nav>
                <ul>
                  <li>
                    <Link to="/">Home</Link>
                  </li>
                  <li>
                    <Link to="/about">About</Link>
                  </li>
                  <li>
                    <Link to="/contact">Contact</Link>
                  </li>
                </ul>
              </nav>
            </>
          );
        }}
      />
      <Route
        path="/contact"
        Component={() => {
          return (
            <>
              <h1>Contact</h1>
              <nav>
                <ul>
                  <li>
                    <Link to="/">Home</Link>
                  </li>
                  <li>
                    <Link to="/about">About</Link>
                  </li>
                  <li>
                    <Link to="/contact">Contact</Link>
                  </li>
                </ul>
              </nav>
            </>
          );
        }}
      />
    </Router>
    )
}

3. Define your route components:

export const Home = () => <h2>Home</h2>
export const About = () => <h2>About</h2>
export const Contact = () => <h2>Contact</h2>

Components

Router

The Router component is the top-level component that holds the routing configuration and renders the appropriate Route component based on the current URL.

Props:

routes: (Optional) Array with optional routes instead of Route component. Example:

const routes = [
    {
     path: '/',
     Component: () => <h1>Home</h1>
    },
    {
     path: '/about',
     Component: () => <h1>About</h1>
    }
]

defaultComponent: (Optional) Default component to render if any routes or children in Router is founded.

Route

The Route component is used to define a route and render the corresponding component when the URL matches the specified path.

Props:

path (string): The URL path for the route. component (function): The React component to render when the URL matches the path.

Link

The Link component is used to create links to navigate between different routes.

Props:

to (string): The URL path to navigate to when the link is clicked.

Contributing

Contributions are welcome! If you find any issues or have suggestions for improvements, feel free to open a new issue or submit a pull request.

This is just an npm package to recreate a own router for educational purposes only.