Question

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

例如：

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

F1R1：pageF1R1，

F1R2：pageF1R2，

F1R3：pageF1R3

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

F2R1：pageF2R1，

F2R2：pageF2R2，

F2R3：pageF2R3

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

所以我已经尝试过类似的事情，如果它有很多的话。有没有更好的方法可以实现？

逻辑

 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网址，您可以使用以下链接创建您的网址：尽可能

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

例如：

逻辑

1 个答案: