Javascript 根据条件重定向路由：React JS

我正在开发一个基本上有两个流的应用程序，比如FLOW1和FLOW2。 存在对应于每个流的路由。现在有一个我维护的开关，在流之间切换，相应地页面也应该被重定向

例如： FLOW1具有以下路线和与之对应的组件：

F1R1:pageF1R1

F1R2:pageF1R2

F1R3：第F1R3页

FLOW2具有以下路线和与之对应的组件：

F2R1:pageF2R1

F2R2:pageF2R2

F2R3：第F2R3页

这些路径是彼此的反向部分，每当我更改配置文件时，与更改的流对应的路径都应该更改

所以我试过类似的方法，它有很多的假设。有没有更好的方法来实现这一点

思维方式 您可以使用react路由器dom来解决您的问题，以下是基于您想法的我的代码

我在这里只使用了一个url，即/flow，您可以创建带有链接的url，如下所示： 尽可能多

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;

手换流

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

新添加的方法getNavBars，也可以从数据库填充此数组

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" }
        ];
  };

我在这里添加了组件didmount

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

最后，您必须对index.js进行更改。您必须使用

<BrowserRouter>
    <App />
  </BrowserRouter>

---

您是否使用React路由器进行路由？如果是这样，您可能希望尝试使用它的组件来声明routing@MartinHorv在这里，我要做的是有计划的，而不是宣布。我们将不胜感激。想要在问题中提到的开关更改上实现一些东西，您可能希望通过编程来实现，而不是像在navigate方法中那样进行声明

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

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

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" }
        ];
  };

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

<BrowserRouter>
    <App />
  </BrowserRouter>