How do I only show a react component based on route change?

Question

I am new to react and am trying build a simple react app. I want to show 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 it possible to put an if else condition to render something on a layout something like 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 would like to detect the route change when a link is clicked then show template accordingly.

Any help is greatly appreciated. Thanks

The `render()` function is like any other function; as long as it returns valid JSX / Components, you can do whatever you want inside (just not change state ;)) Also check this: https://stackoverflow.com/questions/46842117/conditional-rendering-with-react-router — , Jun 27 '19 at 12:52

score 0 · Answer 1 · answered Jun 27 '19 at 15:09

0

You can use another <Router><Route /></Router> switch inside of your RootComponentsimilarly to have you have done in your App component to render certain components based on the route.

answered Jun 27 '19 at 15:09

Nicholas Domenichini

790
1
6
11

score 0 · Answer 2 · answered May 11 '20 at 10:46

In index.js you just need to add you can add another route. In this case i think you want to detech which is admin page and which is user page , and yes it is possible to put an if else condition to render something, but it is bad => Because we have react-dom but we not use that

so i suggest you 1 of many solution maybe help you out :

import { Route, Switch } from 'react-router-dom';
const wrappedRoutes = () => (
  <div>
      <Route path="/" component={abc} />
      <Route path="/bcd" component={bcd} />
    </div>
  </div>
);

const Router = () => (
      <Switch>
        <Route path="/admin" component={wrappedRoutes} />
      </Switch>
);

So if you go url admin you will get component abc and if you go url admin/bcd you will get component bcd.

How do I only show a react component based on route change?

2 Answers2