npm package: 09-react-router
Description: 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.
Latest version: 0.0.4

# 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:
```bash
npm i 09-react-router

# or

yarn i 09-react-router
```

## Usage 
To use React Router components, follow these steps:

1. Import the components:
```jsx
import { Router, Route, Link } from '09-react-router'
```
2. Set up your routing in your applicaction:
```jsx

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:
```jsx
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: 
```javascript
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.