Routing
Routing
Toner React is having routing setup based on React-Router.
You can find our template's router configuration in
src/Routes folder. the
src/Routes/allRoutes.tsx file is containing
all routes of our template.
We have also added Authmiddleware in (Only For BackEnd)
src/Routes/AuthProtected.tsx file, to handle
redirection for non-auth users. you can also handle
roles based routing, redirections, set accessToken
here as per your need.
Note : All private & public routes
are rendered in src/App.tsx file.
How to add new route ?
You can easily add, change or remove any route by simply making changes described below:
1. Open src/Routes/allRoutes.tsx file,
declare your component. E.g.
import newPage from "../pages/newPage"
2. And make sure to add the entry for same with path
and other properties like path and component same as
other routes declared there. if your page is a
public page (with blank layout), then add the route
in
publicRoutes, and if your page is a
private page (with full layout) then add route in
authProtectedRoutes. E.g.
{ path: "/new-page", component: <newPage /> }Each of these properties are explained below:
- path : Url relative path
- component : Actual component name which would get rendered when user visits the path