Last active
December 16, 2018 17:48
-
-
Save alisafariir/1922dd85d30705b289134e99156f13fa to your computer and use it in GitHub Desktop.
react js routing in fixed layout. thanks to @madcoda
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { Component } from 'react' | |
import { BrowserRouter as Router, Route, Link, Match, Redirect, Switch } from 'react-router-dom' | |
import OverviewPage from './page/OverviewPage' | |
import AccountPage from './page/AccountPage' | |
/* | |
Layouts, inline define here for demo purpose | |
you may want to define in another file instead | |
*/ | |
const DashboardLayout = ({children, ...rest}) => { | |
return ( | |
<div className="page page-dashboard"> | |
<div className="sidebar">Sidebar here</div> | |
<div className="main">{children}</div> | |
</div> | |
) | |
} | |
const LoginLayout = ({children, ...rest}) => { | |
return ( | |
<div className="page page-login"> | |
<div className="main">{children}</div> | |
</div> | |
) | |
} | |
/* | |
Route wrapper | |
*/ | |
const DashboardRoute = ({component: Component, ...rest}) => { | |
return ( | |
<Route {...rest} render={matchProps => ( | |
<DashboardLayout> | |
<Component {...matchProps} /> | |
</DashboardLayout> | |
)} /> | |
) | |
}; | |
const LoginLayoutRoute = ({component: Component, ...rest}) => { | |
return ( | |
<Route {...rest} render={matchProps => ( | |
<LoginLayout> | |
<Component {...matchProps} /> | |
</LoginLayout> | |
)} /> | |
) | |
}; | |
/* | |
App | |
*/ | |
class App extends Component { | |
render() { | |
return ( | |
<Router> | |
<Switch> | |
<Route exact path="/"> | |
<Redirect to="/login" /> | |
</Route> | |
<LoginLayoutRoute path="/login" component={LoginPage} /> | |
<DashboardRoute path="/overview" component={OverviewPage} /> | |
<DashboardRoute path="/account" component={AccountPage} /> | |
</Switch> | |
</Router> | |
); | |
} | |
} | |
export default App; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment