09-react-router v0.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:
npm i 09-react-router
# or
yarn i 09-react-router
Usage
To use React Router components, follow these steps:
- Import the components:
import { Router, Route, Link } from '09-react-router'
- 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>
)
}
- 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.