React Routing with conditional rendering

Question

I am trying to set the url depending on the component that is rendered conditionally (following fb tutorial almost exactly). I skipped few details, but essentially code looks like this:

class ParentComponent extends React.Component {

  render() {
   const isTrue = this.state.isTrue;

   let component= null;
   if (isTrue) {
       component = <Component1/>;
   } else {
       component= <Component2/>;
   }

   return (
     <div>
       {component}
       <Component3/>
          ...
       <ComponentN/>
     </div>
    );
  }
}

Now, I want the url to be either /component1 or /component2 depending on which component is loaded. I've tried adding browserHistory.push('/component1'), but it doesn't seam to work.Also, I've tried this, but without success.

I am new to frontend development, so please correct me if I'm wrong. In my opinion, just pushing to the history can't solve the problem, because I actually want the page to stay on 'parent-component'at all times. But when one of the components (1 or 2) is loaded url should be updated. Hope this makes sense.

Versions:

npm -v react-router
5.2.0

Thanks!

which version of react-router you are using? – Mayank Shukla Jul 16 '17 at 00:37 — Mayank Shukla, Jul 16 '17 at 00:37
@MayankShukla Please se update to my question. Thanks – IVS Jul 16 '17 at 02:05 — IVS, Jul 16 '17 at 02:05

Abraham Gnanasingh · Answer 1 · 2017-07-17T07:03:09.913

Please try the following code. It should work as you expected. I used links navigation in the code. You can use state for Conditional Rendering. Let me know in case of any help.

UPDATE: Created Fiddle for even more clear solution - https://jsfiddle.net/fo6zupgj/8/

class ComponentOne extends React.Component {
  render() {
    return (
      <div>
        <h2>Component 1</h2>
        <button onClick={() => this.props.history.goBack()}>Go Back</button>
      </div>
    )
  }
}

ComponentOne = ReactRouterDOM.withRouter(ComponentOne);

class ComponentTwo extends React.Component {
  render() {
    return (
      <div>
        <h2>Component 2</h2>
        <button onClick={() => this.props.history.goBack()}>Go Back</button>
      </div>
    )
  }
}

ComponentTwo = ReactRouterDOM.withRouter(ComponentTwo);

class Home extends React.Component {
  handleNavComponent(ev, index) {
    ev.preventDefault();
    const { history } = this.props;
  
    history.push(`/component${index}`);
  }
  
  render() {
    return (
      <ul>
        <li><a href="#" onClick={(ev) => this.handleNavComponent(ev, 1)}>Component 1</a></li>
        <li><a href="#" onClick={(ev) => this.handleNavComponent(ev, 2)}>Component 2</a></li>
      </ul>
    )
  }
}

Home = ReactRouterDOM.withRouter(Home);

const DynamicRoutes = (props => {
  const { Route } = ReactRouterDOM;
  
  return (
    <Route path={props.path} component={props.component} />
  );
});

const components = [
  { path: "/component1", name: ComponentOne },
  { path: "/component2", name: ComponentTwo }
];

class App extends React.Component {
  render() {
    const { BrowserRouter, HashRouter, Switch, Route } = ReactRouterDOM;
  
    return (
      <HashRouter>
        <Switch>
          { components.map(c => <DynamicRoutes path={c.path} component={c.name} />) }
          <Route path="/" component={Home} />
        </Switch>
      </HashRouter>
    )
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://unpkg.com/react-router-dom/umd/react-router-dom.min.js"></script>

<div id="root"></div>

You can refer this docs for more on react-router.

Hi @Abraham. Thank you for your comment. However, I think your solution might not help (correct me if I'm wrong). I've updated my question with some additional comments. — IVS, Jul 18 '17 at 00:37
I created another [fiddle](https://jsfiddle.net/fo6zupgj/10/) and added some changes over there. Can you try it and let me know whether that helps? — Abraham Gnanasingh, Jul 18 '17 at 18:30
You may configure route like this `` to make dynamically for every child component. — Abraham Gnanasingh, Jul 19 '17 at 10:21

React Routing with conditional rendering

1 Answers1