javascript - 根据条件重定向路由 : React JS

Question

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

例如:

FLOW1 有以下路由及其对应的组件:

F1R1:页面F1R1，

F1R2:页面F1R2，

F1R3:页面F1R3

FLOW2 有以下路由及其对应的组件:

F2R1:页面F2R1，

F2R2:页面F2R2，

F2R3:页面F2R3

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

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

逻辑

 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来解决您的问题，这是我根据您的想法编写的代码

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;

流程1组件

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 = () => {
    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>