基于条件的路由重定向：React JS

Question

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

例如：

FLOW1 有以下路线及其对应的组件：

F1R1：页面F1R1，

F1R2：页面F1R2，

F1R3 : 页面F1R3

FLOW2 有以下路线及其对应的组件：

F2R1：页面F2R1，

F2R2：页面F2R2，

F2R3 : 页面F2R3

这些路线是相互对应的，每当我更改配置文件时，对应于已更改流程的路线都应该更改。

所以我尝试过这样的事情，它有很多 has if's 。有没有更好的方法可以实现？

逻辑

 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

您可以使用react-router-dom 来解决您的问题，这是我根据您的想法编写的代码

我在这里只使用一个网址/flow，您可以使用 Link 创建您的网址 尽可能的

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 组件

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

export default Flow1;

和Flow2组件

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

export default Flow2;

更新：稍微动态的方式

render() 部分，您必须先声明所有路由，然后根据您的 url 将其重定向到所需的页面

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>
    );
  }

改变状态

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

handleChangeFlow

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

我在这里添加了componentDidMount

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

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

包裹组件

<BrowserRouter>
    <App />
  </BrowserRouter>