@crossfox/react-router

Overview

@crossfox/react-router is a powerful and customizable routing library for React applications. It provides an intuitive way to manage your application's routes and their corresponding components. With @crossfox/react-router, you can create complex navigation systems and handle various routing scenarios with ease.

Features

• Simple and intuitive API
• Flexible configuration options
• Full control over routing and navigation
• Customizable route matching and handling

Installation

npm install @crossfox/react-router

or

yarn add @crossfox/react-router

Usage

import React from 'react';
import createRouter from '@crossfox/react-router';

const MainPage = () => <h1>Main Page</h1>;
const AboutPage = () => <h1>About Page</h1>;

const UserWithIdPage = ({ id }) => <h1>User {id}</h1>;

const UserWithNamePage = ({ name }) => <h1>User {name}</h1>;
const BlogListWithChildrenPage = () => <h1>Blog list</h1>;

const BlogViewWithChildrenPage = ({ id }) => <h1>Blog post {id}</h1>;
const BlogAddWithChildrenPage = () => <h1>Blog add</h1>;

const BlogEditWithChildrenPage = ({ id, action }) => <h1>Blog post {id}. Action: {action}</h1>;
const Custom404Page = () => <h1>Custom 404</h1>;

const Router = createRouter({
	'': MainPage, // or [MainPage]
	'about': [AboutPage],
	'user/:id': [UserWithIdPage, /[0-9]+/],
	'user/:name': [UserWithNamePage, /[a-zA-Z0-9_]+/],
	'blog': {
		list: BlogListWithChildrenPage,
		add: BlogAddWithChildrenPage,
		':id': {
			'$root': [/[0-9]+/], // for ":id"
			'view': BlogViewWithChildrenPage,
			'edit/:action': [BlogEditWithChildrenPage, /main|user|content/]
		}
	},
	'.+': Custom404Page // For change Page 404
});

const App = () => <Router/>

export default App

Author

• Oleksii Fursov @nodePro777

API

<Link to="url">Link</Link>

The Link component creates links for navigation between routes.

Property	Type	Description
to	string	Specifies the target location of the link
tagName	string (optional)	Defines the HTML tag to be used for the link (default is a)
data	Record<string, string> (optional)	Additional data associated with the link
onClick	(e: MouseEvent) => void (optional)	Event handler for the click event on the link
href	string (optional)	Specifies the hyperlink destination URL for the link

goTo(url: string, data?:object) :void

The goTo function allows you to navigate to a specific route programmatically.

goBack(level=-1) :void

The goBack function allows you to navigate back to the previous route in the navigation history.

useHistory() :array

The useHistory hook allows access to the navigation history within your components. Return array

useNavigate() :function

The useNavigate hook provides a simple way to navigate between routes programmatically. Return method for change router

useLayout() :string

The useLayout hook allows you to access the current layout information within your components.

useRouterData() :array

The useRouterData hook provides access to the data associated with the current route.