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.
routes
: AppRoute[]
> 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.
component
: React.ComponentType
> 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 has isPrivate
set to true
hasSidebar?
: boolean
> Set the page has the Sidebar component visible
>
> By default, value is true
if route has isPrivate
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 current userHasAuth
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 auth
>
> Default 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 auth
>
> Default is false
name
: string
> The unique page name
path
: string
> 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
route
: Readonly
> The current Route object
params
: { [key: string]: string | number | boolean | undefined }
> Params used to reach current rout
search
: URLSearchParams
> 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.
route
: string | 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 instead as a
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
to
: string
> The Route Name to point
AppRouterTools
appName?
: string
> Get the current AppName
appState
: Readonly
> Get the current AppState
currentRoute
: Readonly
> Get the current Route and its params and search string
defaultPrivateRoute
: Readonly
> Get the default private defined route
defaultPublicRoute
: Readonly
> Get the default public defined route
layout
: Readonly
> 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