Wednesday, 1 February 2017

How to add a Router?

On layout.js:
Use 'react-router' {Link} component.

import React from 'react';
import { Link } from 'react-router';// it's a link component

export default class Layout extends React.Component {
render(){
return(
<div className="top-menu">
<ul>
<li>
<Link to="/blog">Blog</Link>
</li>
<li>
<Link to="/picture">Picture</Link>
</li>
<li>
<Link to="/video">Video</Link>
</li>
</ul>
{this.props.children}
</div>
)
}
}

On app.js set the path and compoents on the Router and Route. Also set Redirect.

// react-router needs to be installed
import {Router, Route, Redirect, hashHistory} from 'react-router';

import Layout from './layout/layout';

import BlogPage from './pages/blog';
import PicturePage from './pages/picture';
import VideoPage from './pages/video';

const app = (
<Router history={hashHistory}>
<Redirect from="/" to="/blog" />
<Route path="/" component={Layout}>
<Route path="blog" component={BlogPage} />
<Route path="picture" component={PicturePage} />
<Route path="video" component={VideoPage} />
</Route>
</Router>
)

jQuery(function() {
ReactDOM.render(
app,// load the component with app function according the choosen Route
document.getElementById('comment-box'),
function(){
console.timeEnd("react-app");
}
);
})

WHAT OTHERS ARE READING/RELATED TO THIS:

0 comments:

Post a Comment

Find job here...