CODEWITHSUNDEEP
reactjsreact-reduxreact-routerreact-boilerplate
cumibulat
cumibulat

Reputation: 444

react-router-dom config for sidebar

i'm creating app based on react-boilerplate, and then i add sigma dashboard template for the homepage. Let's say i have 4 page :

And my route code is like :

return (
    <div>
        <Switch>
            <Route exact path="/Login" component={LoginPage} />
            <Sigma>
                <Route exact path="/Home" component={HomePage} />
                <Route exact path="/User" component={UserPage} />
                <Route exact path="/EditUser" component={EditUserPage} />
            </Sigma>
            <Route component={NotFoundPage} />
        </Switch>
    </div>
);

For the login, homepage and user it already shown as i expected. Login page will displayed without the sidebar, and then homepage and user will displayed with the sidebar. But for the not found page it's not displayed as i expected. I want it to displayed without the sidebar.

login page : Login

homepage : homepage

user : user

not found page : not found page

Please throw some pointer / documentation that related to this issue. Many thanks before. Source : https://github.com/cumibulat/PrimeJ2H/

Upvotes: 0

Views: 1796

Answers (1)

user11435424
user11435424

Reputation: 21

In this case, you need change your index.js to render a "Base Component" after to load the route and input your route component in Base Component.

In this Base component you can make your sidebars to use in your application.

For example:

**

<Switch>
<Route path="/" exact component={Login} />
<Route path="/register" component={Register} />
<Route path="/dashboard"><Base><Dashboard /></Base></Route>
<Route component={FourHundredFour} />
</Switch>

**

Upvotes: 2

Related Questions