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

Question

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

例如：

FLOW1 有以下路由和对应的组件：

F1R1 : pageF1R1,

F1R2 : pageF1R2,

F1R3 : 页面F1R3

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

F2R1 : pageF2R1,

F2R2 : pageF2R2,

F2R3 : pageF2R3

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

所以我尝试过类似的方法，它有很多 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 来解决您的问题，这是我根据您的想法编写的代码

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

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>

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

Redirection of routes based on condition: React JS

javascript

ecmascript-5

ecmascript-6

reactjs

react-router

例如：

逻辑