As a beginner in the world of React, I am currently working on creating a simple React application. My goal is to display a component based on the current route.
index.js
var React = require('react');
var ReactDOM = require('react-dom');
var createReactClass = require("create-react-class");
import { Router, Route, browserHistory, Link } from "react-router";
var About = require("./about");
var Admin = require("./admin");
var App = createReactClass({
render: function() {
return(
<Router history={browserHistory}>
<Route path={"/"} component={RootComponent}></Route>
<Route path={"/about"} component={About}></Route>
<Route path={"/admin"} component={Admin}></Route>
</Router>
);
}
});
// Create a component
var RootComponent = createReactClass({
render: function() {
var currentLocation = this.props.location.pathname;
return(
<div>
<Link to={"/about"}>About</Link>
<Link to={"/admin"}>Admin</Link>
<h2>This is the root component</h2>
</div>
);
}
});
// Put component into html page
ReactDOM.render(<App />, document.getElementById("app_root"));
Is there a way to use an if else condition to determine what content to render on a layout based on the code below?
var RootComponent = createReactClass({
render: function() {
var currentLocation = this.props.location.pathname;
if (currentLocation == "admin") {
return(
<div class="admin_template">
</div>
);
} else {
return(
<div class="home_template">
</div>
);
}
}
});
I am looking for a way to detect when a route changes after clicking a link and then display the appropriate template.
Your assistance on this matter would be greatly appreciated. Thank you!