How to add a Router?

On layout.js: Use 'react-router' {Link} component. import React from 'react'; import { Link } from 'react-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");
}
);
})

Related

ReactJS INTERVIEW QUESTIONS 9183592345092396817

Post a comment

emo-but-icon

Follow Us

Recent

Comments

Donate

Side Ads

Text Widget

Connect Us

Sql Server 2017 Interview Questions
Sql Server Basic Interview Query Set-1
Sql Server Basic Interview Query Set-2
Sql Server Date-Time Interview Query SET-3
Sql Server Salary Interview Query SET-4
Sql Server Group By Interview Query SET-5
Sql Server Join Interview Query SET-6
Sql Server Tricky Join Interview Query SET-7
Sql Server DDL Interview Query SET-8
Small but very Tricky Sql Server Query SET-9
Very Much Tricky Query (not 4 fresher)SET-10
Sql Server Complex Interview Query SET-11
Sql Server Datatype Interview Questions
Sql Server View Interview Questions
Sql Server Index Interview Questions
TCS Tricky Sql Interview Queries
HCL Sql Interview Queries
Sql Server SP Interview Questions
Sql Server Trigger Interview Questions
Sql Server Temp Table Interview Questions
Sql Server 2016 Interview Questions
Sql Server Performance Tuning Interview Q.
Sql Server Constraints Interview Questions
Sql Server Storage/Size Interview Questions
Sql Server Very Basic Interview Questions
Sql Server Quiz for Fresher
Sql Server Icon Quiz for All
Sql Server 300+ Theoretical Interview Questions
Sql Server Complete Set

ASP.NET AND JQUERY INTERVIEW QUESTION
ASP.NET: Web Config Interview Question
ASP.NET: View State Interview Question
ASP.NET: Session Interview Question
ASP.NET: Session Interview Question 
ASP.NET: Security Interview Question
ASP.NET: Catching Interview Question
C# OOPS Interview Question
MORE Interview Question
JQUERY: Interview Question Set-1
JQUERY: Interview Question Set-2
JAVA-SCRIPT: Interview Question Set-1
JAVA-SCRIPT: Interview Question Set-2
ASP.NET MVC: Interview Question Set-1

POPULAR POSTS
10 MOST DIFFICULT INTERVIEW QUESTIONS
5 BEST INTERVIEW TIPS
YOUR 10 MISTAKE DURING INTERVIEW
2016 TOP 20 GROUP DISCUSSION TOPICS
HOW SQL PERFORMANCE AFFECTED BY DATATYPE
item