Redirection of routes based on condition: React JS

Question

I am working on an application that basically has two flows say "FLOW1" and "FLOW2". There are routes corresponding to each of the flows. Now there is a switch that I have maintained that toggles between the flows and correspondingly the page also should get redirected.

For example:

FLOW1 has following routes and the components corresponding to it:

F1R1 : pageF1R1,

F1R2 : pageF1R2,

F1R3 : pageF1R3

FLOW2 has following routes and the components corresponding to it:

F2R1 : pageF2R1,

F2R2 : pageF2R2,

F2R3 : pageF2R3

the routes are counter part of each other, and whenever I change the profile the route corresponding to the changed flow should get changed.

So I have tried something like this, it has a plenty has if's . Is there a better way this can be achieved?

Logic

 navigate = (event) =>
 {
     let currentUrl = this.props.history.location.pathname;
     let flow = event.target.name;
     if(flow === "FLOW1")
     {
        if(currentUrl === "/F2R1")
          this.props.history.push("/pageF1R1");
        if(currentUrl === "/F2R2")
          this.props.history.push("/pageF1R2");
        if(currentUrl === "/F2R3")
          this.props.history.push("/pageF1R3");
     }
     if(flow === "FLOW2")
     {
        if(currentUrl === "/F1R1")
          this.props.history.push("/pageF2R1");
        if(currentUrl === "/F1R2")
          this.props.history.push("/pageF2R2");
        if(currentUrl === "/F1R3")
          this.props.history.push("/pageF2R3");
     }
 }

Answer 1

You may use react-router-dom to solve your issue, here is my code based on your idea

I just use here one url that is /flow, you may create your url with Link as much as possible

App.js

import React, { Component } from "react";
import { Route, Switch, Link } from "react-router-dom";
import Flow1 from "./flow1";
import Flow2 from "./flow2";
class App extends Component {
  state = {
    isFlow: true
  };

  handleChangeFlow = () => {
    let isFlow = this.state.isFlow;
    isFlow = !isFlow;
    this.setState({ isFlow });
  };

  render() {
    return (
      <div>
        <h1>welcome</h1>
        <button onClick={this.handleChangeFlow}>Switch</button>
        <Link to="/flow">Flow</Link>
        <Switch>
          <Route path="/flow" component={this.state.isFlow ? Flow1 : Flow2} />
        </Switch>
      </div>
    );
  }
}

export default App;

Flow1 component

import React from "react";
const Flow1 = () => {
  return <h1>Flow-1</h1>;
};

export default Flow1;

And Flow2 component

import React from "react";
const Flow2 = () => {
  return <h1>Flow-2</h1>;
};

export default Flow2;

Update: slightly dynamic way

render() section, you have to declare all of your route first and later based on your url it will redirected to the desired page

render() {
    return (
      <div>
        <h1>welcome</h1>
        <button onClick={this.handleChangeFlow}>Switch</button>
        {this.state.navBars.map(n => (
          <Link to={n.path}>{n.name}</Link>
        ))}

        <Switch>
          <Route path="/flow11" component={Flow1} />
          <Route path="/flow12" component={Flow2} />
          <Route path="/flow13" component={Flow3} />

          <Route path="/flow21" component={Flow4} />
          <Route path="/flow22" component={Flow5} />
          <Route path="/flow23" component={Flow6} />
        </Switch>
      </div>
    );
  }

Changed state

  state = {
    isFlow: true,
    navBars: []
  };

handleChangeFlow

handleChangeFlow = () => {
    let isFlow = this.state.isFlow;
    isFlow = !isFlow;
    this.setState({ isFlow, navBars: this.getNavBars(this.state.isFlow) });
  };

Newly added method getNavBars, you populate this array from database too

getNavBars = isFlow => {
    return isFlow
      ? [
          { name: "Flow1", path: "/flow11" },
          { name: "Flow2", path: "/flow12" },
          { name: "Flow3", path: "/flow13" }
        ]
      : [
          { name: "Flow1", path: "/flow21" },
          { name: "Flow2", path: "/flow22" },
          { name: "Flow3", path: "/flow23" }
        ];
  };

And I have added componentDidMount here

componentDidMount() {
    this.setState({ navBars: this.getNavBars(this.state.isFlow) });
  }

Finally you have to make change on your index.js. You have to wrap up component with

<BrowserRouter>
    <App />
  </BrowserRouter>