Routing

Industry standard parameterized routing system.

Instead of file based routing, Oreact offers a better foundation which gives you freedom to declare nested routing. Oreact routing system is based on react-router and its package react-router-config.

When you add page components into pages/ directory, you need to manually link it with it's route.

For server side rendering, with a express You don't need to set server side routes. Oreact handles all these for you.

Page Routes

Apart from just setting route parameters and url address, here you can also set which layout and Material-UI theme will be used for that page. See the example below:

import loadable from '@oreact/core/loadable';
export default {
    // Page layout and theme configuration
    settings: {        
        /* Page settings goes here */
    },
    // Declare routes
    routes: [
        {
            address: ['/home'],
            exact: true,
            component: loadable(() => import('./Component'), {ssr: true}),
            routes: {
                /* Add nested child routes */
            }           
        }
    ]
};

Nested Routes

Oreact structures relative paths with deeply nested routes. Just set relative paths as child routes. It introduces the routes key for sub routes.

Example: Lets say your absolute path is /about/author, you can set author as a child route as below.

In /pages/about/config.js file:

import loadable from '@oreact/core/loadable';

export default {
    settings: {
        /* About page layouts and theme configs. */
    },
    routes: [
        {
            address: ['/about'],
            exact: true,
            component: loadable(() => import('./Component'), {ssr: true}),
            routes : [
                {
                 address: ['/author'],        
                 exact: true,
                 component: loadable(() => import('./author/Component'), {ssr: true}),
                }                     
            ]
        }
    ]
};

Together it creates a absolute path /about/author. With the help of route hook useChildRoutes() you can inject author component into about component wherever your want. for example.
about/Component.js :

import React from 'react';
import {useChildRoutes} from '@oreact/core/router';

export default (props) => {    
    const {childRoutes} = useChildRoutes(props);
    return <div>                        
        ... {childRoutes()} ...
        </div>;                  
}              

Dynamic Routes

Dynamic routes achieved by setting variables into routing paths. As you have probably figured out, React Router powers all of Oreact's routing. You can use any and all parts of React Router.
Parameterized routing work's as shown below:

import loadable from '@oreact/core/loadable';

export default {    
    routes: [
        {
            address: ['/profile/:id'],
            exact: true,
            component: loadable(() => import('./Component'), {ssr: true})            
        }
    ]
};

Redirect

Oreact provides a Redirect component that helps to redirect to another URI. Here is how you can use it.

import React, {useEffect} from 'react';
import {Redirect} from '@oreact/core/router';

export default observer((props) => {    
    if(!props.isLoggedInd){
        return <Redirect status={301} from={pathname} to={'/login'} />
    } else {
        return <div>Home page</div>;
    }
}

Hooks

useHistory

Programmatically navigate with Oreact router. history handles interaction with the browser's window.history for you with its browser and hash histories. Here is how you can use it:

import {useHistory} from '@oreact/core/router';

export default (props) {
    const history = useHistory();
    ...
    return <Button onClick={() => history.push('/home')}>Go home</Button>
}

useParams

useParams returns an object of key/value pairs of URL parameters.

import {useParams} from '@oreact/core/router';

export default (props) {
    const {param1, param2, ...} = useParams();
    ...
}

useQueryParams

Returns an object of key/value pairs of Query string parameters.

import {useQueryParams} from '@oreact/core/router';

export default (props) {
    const {param1, param2, ...} = useQueryParams(); 
    ...
}

useLocation

The useLocation hook returns the location object that represents the current URL.

import {useLocation} from '@oreact/core/router';

export default (props) {
    const location = useLocation();
    ...
}

usePageRoute

Access page route anywhere in your page. It matches with current path and returns active page route.

import {usePageRoute} from '@oreact/core/router';

export default (props) {
    const pageRoute = usePageRoute();
    ...
}

useActiveChildRoute

Among the list of children it returns active child route for it's parent route. Sometime you need to know which child route is being called in your parent Component.

import {useActiveChildRoute} from '@oreact/core/router';

export default (props) {
    const activeRoute = useActiveChildRoute(props);
    ...
}

useChildRoutes

Returns all child routes to inject into it's parent component.

import {useChildRoutes} from '@oreact/core/router';

export default (props) {
    const childRoutes = useChildRoutes(props);
    ...
    return <div>
        ...
        {childRoutes()}
        ...
    </div>;
}

useGroupRoutes

Returns all grouped child routes to inject them all together into a parent component.

Group children routes as shown below:

import loadable from '@oreact/core/loadable';
export default {    
    routes: [
        {
            address: ['/about'],            
            component: loadable(() => import('./Component'), {ssr: true}),
            routes : [
                {
                    groupBy: 'authorRoute',
                    address: ['/author'],                                    
                    component: loadable(() => import('./author/Component'), {ssr: true})
                },
                {
                    groupBy: 'authorRoute',
                    address: ['/books'],                                    
                    component: loadable(() => import('./books/Component'), {ssr: true})
                }          
            ]   
        }
    ]
};

Inject route group:

import {useGroupRoutes} from '@oreact/core/router';

export default (props) {
    const {authorRoute} = useGroupRoutes(props);
    ...
    return <div>
        ...
        {authorRoute()}
        ...
    </div>;
}