React Routing

Routing

In a single-page application, you change what the user sees by showing or hiding portions of the display that correspond to particular components, rather than going out to the server to get a new page. As users perform application tasks, they need to move between the different views that you have defined.

Suppose you want to create a new module ( For creating a new module refer create new module ) then you have to add new routes for that modules.

Basic Route

Following are the fundamental building blocks to creating a route.


import React, { Fragment } from "react";
import Link from 'next/link';
import { useRouter } from "next/router";


<ul>
<li>
	<Link href="/">Home
		</Link>
			</li>
			<li>
			<Link href="/about">About Us
			</Link>
			</li>
			<li>
		<Link href="/blog/hello-world">Blog Post
	</Link>
</li>
</ul>

Configure Link in Menu

To Add new link in Sidemenu

Following are the fundamental building blocks to creating a new link.


├── shared
├──layout-components
	├──sidebar
		nav.js
export const MENUITEMS = [
{
	menutitle: 'DASHBOARD',
	Items: [
		{
			path: `/dashboard`,
			icon: 'ti-home',
			type: 'link',
			active: false,
			selected: false,
			title: 'Dashboard'
		},
		{
			title: 'CryptoCurrencies',
			icon: 'ti-wallet',
			type: 'sub',
			active: false,
			selected: false,
			children: [
				{
					path: `/crytocurrencies/dashboard`,
					type: 'link',
					active: false,
					selected: false,
					title: 'Dashboard'
				},
				{
					path: `/crytocurrencies/market`,
					type: 'link',
					active: false,
					selected: false,
					title: 'Marketcap'
				},
				{
					path: `/crytocurrencies/currencyechange`,
					type: 'link',
					active: false,
					selected: false,
					title: 'Currency exchange'
				},

			]
		},

	]
}
]