🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Book a DemoInstallSign in
Socket

react-router-tree

Package Overview
Dependencies
Maintainers
1
Versions
13
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-router-tree

Implement Next.js style routing in any Vite or Webpack based react application

0.0.6
npm
Version published
Weekly downloads
0
-100%
Maintainers
1
Weekly downloads
 
Created
Source

React Router Tree

Implement Next.js style page directories in your single page application. Supports React projects created using Vite or CRA (or any other webpack implementation).

Installation

Install the package using NPM

npm install react-router-tree

Page folder structure

Pages are defined using a folder structure in your application. Subfolders denote path segments, while pages map to index.tsx or index.jsx files. In react-router-tree, each page is given it's own directory, in which assets and styles can be placed, allowing for a clean and structured page setup.

URL Parameters

Parameters can be defined by using [name] as folder name. This will automatically translate into :name when building routes.

Index mapping

Folders named @ will map to the index page of the parent directory.

Example folder structure

pages/
	@/
		index.tsx
		styles.tsx
	help/
		index.tsx
		style.scss
	settings/
		nested/
			index.tsx
		[param]/
			index.tsx

The above example translates to the given routes

/
/help
/settings/nested
/settings/:param

Exporting page components

Each page is expected to contain a default export of it's RouteObject. For TypeScript users a defineRoute helper function is included. The path property will automatically be populated when parsing the tree, so it may be omitted.

import { defineRoute } from "react-router-tree";

function IndexPage() {
	return (
		<div>
			Page content
		</div>
	)
}

export default defineRoute({
	element: <IndexPage />
});

Usage

// Using vite:
const pageTree: RouteTree = {
	prefix: './pages',
	routes: import.meta.glob('./pages/**/index.tsx', { eager: true })
};

// Using Create React App:
const pageTree: RouteTree = {
	prefix: './',
	routes: require.context('./pages/', true, /\index\.tsx$/)
};

// Combine page trees into a single array of routes
const routes = buildRouteObjects([pageTree]);

Example

An example implementation can be found here.

License

react-router-tree is licensed under MIT

Copyright (c) 2022-present, Starlane Studios

FAQs

Package last updated on 16 Aug 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts