Moid Mohd February 2016

Render different component depending on route

What I'm trying to achieve is to render different content surrounding view depending upon the routing url. I'm using react-router.

const App = React.createClass({
  render() {
    return ( 
      <div> //this is when Login component
          {this.props.children}

           //something like this when it is any page except login
          <Sidebar />
          {this.props.children}
      </div>
    )
  }
})

ReactDOM.render(
        <Router history={createBrowserHistory()}>
          <Route path="/" component={App}>
            <IndexRoute component={Login} />
            <Route path="login" component={Login} />
            <Route path="publisher-list" component={PublisherList}/>
              <Route path="/edit-publisher/:id" component={EditPublisher}/>
            <Route path="add-publisher" component={AddPublisher}/>
            <Route path="add-professional" component={AddProfessional}/>
          </Route>
        </Router>
  , document.getElementById('app'));

My problem is how to hide sidebar when it is a login page and show sidebar on rest pages. How can I do this...?

*I haven't included the imports, assume all imports are included.

Consider this as an example of an admin portal side. First thing thing that you want to see is a login page. So no sidebar or navbar is needed. But once he logs in all view must contain sidebar and navbar by default..So www.admin.com/ or www.admin.com/login should be login page and the rest URLs..like www.admin.com/publisher-list or www.admin.com/professional etc should have the navbar and sidebar.

Answers


Chris February 2016

I think the best thing to do would to simply create another component and the sub-routes with the different styling in there:

<Router history={createBrowserHistory()}>
  <Route path="/" component={App1}>
    <IndexRoute component={Login} />
    <Route path="login" component={Login} />
    <Route path="add-professional" component={AddProfessional}/>
  </Route>
  <Route path="/publisher" component={App2}>
    <IndexRoute component={PublisherList} />
    <Route path="edit/:id" component={EditPublisher}/>
    <Route path="add" component={AddPublisher}/>
  </Route>
</Router>

this way you can set different layout for app1 and app2.

Alternative:

You can add some conditionals inside your app to check for the current url with this.props.location.pathname and play around with conditionals on that. Though, depending on your application, it may not be advisable to do so.


Shiroo February 2016

What about something like this?

function requireAuth(nextState, replaceState) {
    if (typeof window !== 'undefined') {
        if (!localStorage.jwt) {
            replaceState({nextPathname: nextState.location.pathname}, '/login');
        }
    }
}

function disallowLogin(nextState, replaceState) {
    if (typeof window !== 'undefined') {
        if (localStorage.jwt) {
            replaceState({nextPathname: nextState.location.pathname}, '/');
        }
    }
}

export default (
    <Route>
        <Route path="login" component={Login} onEnter={disallowLogin}/>
        <Route path="/" component={App} onEnter={requireAuth}>
          Your routes here            
        </Route>
    </Route>
);

So basically:

Whenever someone visits your page, he gets redirected to Login unless he has JWT in his localStorage. If he will be authenticated then he will proceed to admin app.

The other way around is probably with

var children = React.Children.map(this.props.children, (child) => {
                return React.cloneElement(child, {isAuthenticated: true/false});
})

And then you could have in every children to render or not it depending on the result of isAuthenticated props. Though Sidebar would need to be a childrne then.

The last case would be different rendering in Sidebar only, depending on the case if someone is logged in or not

render() {
    if(this.props.isAuthenticated){
       return <Sidebar />
    } else {
       return <div/>
}

Also if you are storing logged person token somewhere in his browser (i.e. localStorage) then you could simply check if he has a token over there (which would basically mean that he is logged in) and then display it like above though instead of isAuthenticated you would have a different case

Post Status

Asked in February 2016
Viewed 3,603 times
Voted 11
Answered 2 times

Search




Leave an answer