CODEWITHSUNDEEP
javascriptreactjsredux
Chris
Chris

Reputation: 993

Creating a control panel page in react

What is another efficient way to implement a navigation bar in a control panel page approach? Say we have a menu bar with a bunch of menu buttons. Clicking on a button will render a new page (without even refreshing the browser) on the side of the page.

Here is my navbar:

enter image description here

Clicking on User Interface will render a todos api page where the user can add todos, etc. The current implementation I have is that when clicking on User Interface it will dispatch a redux action that will send out a new page string like "todos.userinterface". The receiver will receive the string and will know that the subsection is "userinterface" and the parent section is "todos" based on the dot. So it will slice like const section = pageString.slice(0, pageString.indexOf('.')); and const subsection = pageString.slice(pageString.indexOf('.') + 1, pageString.length);

I feel like this is a little unreliable because what if the "query string" gets longer and has more subsections? Like todos.userinterface.edittodo etc then i'll had to do a triple .slice() method to get all sections.

Also, what is the current convention to handle this?

Upvotes: 0

Views: 854

Answers (1)

palsrealm
palsrealm

Reputation: 5243

You can use the React-Router library for creating the Navigation bar. Your navbar will consist of NavLink components which point to the path of the different components. E.g. the User Interface link would be similar to 

<NavLink to='/todos'>User Interface </NavLink>.

Your Control panel would contain the Routes which would render the different components.

<Switch>
    <Route path='/todos' component={Todos}/>
</Switch>

EDIT The way in which you can create nested routes is as follows. Your App Component (top-level component) will contain the routes for rendering Control Panel (mid-level component). So the routes in App would be

<Switch>
    <Route path='/' component={Home}/>
    <Route path='/controlpanel' component={ControlPanel}/>
    .....//other routes
</Switch>

Your Control Panel component would contain the routes to render your Todos (bottom-level) component.

<Switch>
    <Route path='/' component={ControlPanelHome}/>
    <Route path='/todos' component={Todos}/>
    ..... //other routes
</Switch>

This type of a structure would let you achieve the rendering style you are trying to achieve. Now your urls to access the components would be as follows:

/ -> Home

/controlpanel ->control panel home

/controlpanel/todos -> todos component

Upvotes: 1

Related Questions