If you want you can add any class to wrappers. Additional ClassName are merged together using clsx
library.
Refer to clsx documentation to know what ClassValue
is.
: getNextRoute?(props: AppRoute, appState: AppState, routeProps: RouteComponentProps) => string | null | MandatoryRedirect
This function will be called after a location event occurred, but before the page rendering function.
Use this function if you want to mandatory redirect a user to another page. You could return a string to refer directly to a defined route, or an object (described on
MandatoryRedirect
), with route, params and state.
: hasNavbar?boolean
Set if AppRouter must render the
Navbar
component on page where Navbar has been enabled
: hasSidebar?boolean
Set if AppRouter must render the
Sidebar
component on page where Sidebar has been enabled
: onHashChange?(current: string, location: Location, history: History) => void
A handler callback invoked each time hash changed.
: onRouteChange?(current: AppRoute, location: Location, history: History) => void
A handler callback invoked each time location changed.
: routesAppRoute[]
Define each single route. Check the AppRoute interface to get documentation on each prop to build your routing system.
: pageTitleWhileInitiallyLoading?string
Set the Page Title used while app is in Initially Loading State
: pageTitleWhileLoading?string
Set the Page Title used while app is in Loading State
: pageTitleSeparator?string
Set the Page Title separator.
When the title inside
will change, computing function will use the current appName string, and the current page title string: set this props to choose how the two names will be joined together.
: userHasAuth?boolean
Tell the AppRouter if current user has authorization to show a private page.
Changing
userHasAuth
on private/public only page will automatically perform a mandatory redirect to default private/public page based on user auth.
: useRouteClassName?boolean
Tell the AppRouter must append current route className to HTMLElement defined in
appendRouteClassNameTo
AppRoute
AppRoute interface is used to describe each single Route.
: componentReact.ComponentType<RouteComponentProps>
Is the component used to render the page at current route
: exact?boolean
Set if this route must be reached only if exact path has been typed by user.
By default, value is
true
: hasNavbar?boolean
Set the page has the Navbar component visible
By default, value is
true
if route hasisPrivate
set to true
: hasSidebar?boolean
Set the page has the Sidebar component visible
By default, value is
true
if route hasisPrivate
set to true
: isDefault?boolean | 'private' | 'public'
When the App start, or when
userHasAuth
prop changed, if current page could not be reached by user, routing will fallback to default page based on currentuserHasAuth
prop.For a hybrid page (when a page is both public and private) you could manually set if current route is default for private or public routing
: isPrivate?boolean
Set if the page is Private. A Private page could be reached only when
userHasAuth
is true. You could declare a page both private and public: the result is a Hybrid page, visible by user with and without authDefault is
false
: isPublic?boolean
Set if the page is Public. A Public page could be reached only when
userHasAuth
is false. You could declare a page both private and public: the result is a Hybrid page, visible by user with and without authDefault is
false
: namestring
The unique page name
: pathstring
The page path
Alert:
react-router-dom
will accept also an array of string. At the moment this is not accepted by AppRouter.
: sensitive?boolean
When true, will match if the path is case sensitive.
: strict?boolean
When true, a path that has a trailing slash will only match a location.pathname with a trailing slash. This has no effect when there are additional URL segments in the location.pathname.
: title?string
The page title, appended to current AppName
CurrentRoute
: routeReadonly<AppRoute>
The current Route object
: params{ [key: string]: string | number | boolean | undefined }
Params used to reach current rout
: searchURLSearchParams
Converted search query string to URLSearchParams object
AppState
The current state of App, represented by
isInitiallyLoading
:boolean
Get if app is in Initially Loading State
isLoading
:boolean
Get if app is in Loading State
userHasAuth
:boolean
Get if current user has auth
SideRouteComponents
A set of components used to render the whole app page.
Each declared component receive as props the appState
key, an object containing the current state of the app.
Refer to AppState
interface to props description.
: Footer?React.ComponentType<{ appState: AppState }>
A content rendered under the Page
: Header?React.ComponentType<{ appState: AppState }>
A content rendered above the Page, but under the Navbar (if present)
: InitialLoader?React.ComponentType<{ appState: AppState }>
The component to render while app state has
isInitiallyLoading
equal to true
: Loader?React.ComponentType<{ appState: AppState }>
The component to render while app state has
isLoading
equal to true
: Navbar?React.ComponentType<{ appState: AppState }>
The Navbar element, rendered on top of page. Setting the Navbar component will not automatically show the Navbar element until
hasNavbar
of AppRouter component is true.
: NotFound?React.ComponentType<{ appState: AppState }>
Custom component page to show on NotFound page
: Sidebar?React.ComponentType<{ appState: AppState }>
The Sidebar element, rendered on left side of page. Setting the Sidebar component will not automatically show the Sidebar element until
hasSidebar
of AppRouter component is true.
MandatoryRedirect
This is an Object that could be returned by getNextRout()
method to force routing to another page.
: routestring | AppRoute
The new route
: params?{ [key: string]: string | number | boolean | undefined }
Params used to build the route
: state?LocationState
Location state passed to route
AppLinkProps
AppLink element extends each props of Link or NavLink element plus:
: asNavLink?boolean
Render the element as a
<NavLink />
instead as a<Link />
: params?{ [key: string]: string | number | boolean | undefined }
Params passed to build the complete route
: renderAnyway?boolean
By default, a AppLink will be rendered only if current user could reach the requested route. Eg. If a user has no auth, a link to a private route will not be rendered.
Set this props to
true
if link must be rendered anyway
: tostring
The Route Name to point
AppRouterTools
: appName?string
Get the current AppName
: appStateReadonly<AppState>
Get the current AppState
: currentRouteReadonly<CurrentRoute>
Get the current Route and its params and search string
: defaultPrivateRouteReadonly<AppRoute>
Get the default private defined route
: defaultPublicRouteReadonly<AppRoute>
Get the default public defined route
: layoutReadonly<AppRouterLayout>
Get current layout settings
: restoreAppName() => void
Restore the default app name defined in
: couldRouteTo(route?: AppRoute) => void
Check if a route could be performed to a page
: routeTo(route: string | AppRoute, params?: {}, state?: LocationState) => void
Route to a page by name
: routeToDefaultPrivate(params?: {}, state?: LocationState) => void
Route to default private page
: routeToDefaultPublic(params?: {}, state?: LocationState) => void
Route to default public page
: setAppName(nextAppName?: string | ((currentAppName?: string)) => string | undefined) => void
Set a new App Name
: setPageTitle(pageTitle?: string) => void
Set a new page Title
AppRouterLayout
: hasNavbar?boolean
Check if current route has navbar visible
: hasSidebar?boolean
Check if current route has sidebar visible
: hidePageWhileInitiallyLoading?boolean
Check if current page must be hide if app is in initially loading state
: hidePageWhileLoading?boolean
Check if current page must be hide if app is in loading state
: pageTitleWhileInitiallyLoading?string
Get the page title to set while app is in initially loading state
: pageTitleWhileLoading?string
Get the page title to set while app is in loading state
TypeScript Usage
- : TODO
Roadmap
See the open issues for a list of proposed features (and known issues).
ToDo
- SubRouting
- Define Route in a more declarative way
- TypeScript extended functionality
- Style base example
- More Examples
Contributing
Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.
Fork Example
To fix or add new features feel free to fork this repo by:
- Fork it ([https://github.com/marcocavanna/react-app-router/fork])
- Clone the project on your workspace (
git clone https://github.com/marcocavanna/react-app-router.git
) - Inside the clone repository, add the upstream to this repo (
git remote add upstream https://github.com/marcocavanna/react-app-router.git
) - Create your feature / fix branch (
git checkout -b feature/my-new-route-component
) - Do some cool stuff
- Commit your changes (
git commit -am 'feat(component): added a wonderful component'
) - Push your work (
git push -u origin feature/my-new-route-component
) - Create the pull request, from your forked github repository page
Authors
- Marco Cavanna - Initial Work
Built With
- React A library to create UI
- react-router-dom Declarative routing for React
- clsx ClassName Utility
- slugify Create slug from string
- tiny-invariant A tiny invariant alternative
License
This project is licensed under the MIT License