ReactJS -如何使用 React Router 创建具有单路径的多步骤组件/表单

Question

我想在用户输入请求的信息后在组件之间切换。
将按此顺序向用户显示的组件：

1. {MobileNum } 输入手机号码
2. {IdNumber } 身份证号码
3. {CreatePassword } 创建密码

当所有这些步骤完成后，浏览器将切换到主页。用户必须无法在页面之间移动，直到他填写了每个组件中的每个请求。

现在我想要一种更好的路由器方式，就好像我里面有 3-4 个组件Login，并且必须在安全的乳清中，而且用户不能通过 URL 手动切换组件。

import React, { Component } from 'react';
import {
  BrowserRouter as Router,
  Redirect,
  Route,
  Switch,
} from 'react-router-dom';
import MobileNum from './MobileNum.jsx';
import IdNumber from './IdNum.jsx';
import CreatePassword from './createPassword .jsx';

class SignUp extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <Router>
          <Switch>
                //// Here needs to know how to navigate to each component on its turn
            <Route path='/'  component={MobileNum} />                                                
            <Route path='/'  component={IdNumber} />
            <Route path='/'  component={CreatePassword } />
          </Switch>
        </Router>
      </div>
    );
  }
}

export default SignUp ;

我在reactrouter.com和许多其他 网站上搜索了干净的解决方案，但没有找到答案。
知道最好的方法是什么吗？

谢谢

Answer 1

由于像位置这样的路由器变量是不可变的，条件渲染本身将是更好的选择，如果你不想使用 if else，你可以尝试 switch。我在下面给出了一个例子，当在每个组件中提交值时，你必须触发 afterSubmit 。如果你使用 redux，你可以更好地实现它，因为你可以将值存储在 redux 状态中，并使用 dipatch 直接从每个组件设置它。

//App.js
import React, { useState } from 'react';
import MobileNum from './MobileNum.jsx';
import IdNumber from './IdNum.jsx';
import CreatePassword from './createPassword .jsx';

function App (){
 const [stage,setStage]= useState(1);
 switch(stage){
    case 2:
      return <IdNumber  afterSubmit={setStage.bind(null,3)}/>
      break;
    case 3:
      return <CreatePassword afterSubmit={setStage.bind(null,4)} />
    case 4:
      return <Home  />
      break;
    default:
      return <MobileNum  afterSubmit={setStage.bind(null,2)}/>
 }
}

export default App;

//Root

import React, { Component } from 'react';
import App from './App.jsx';
import {
  BrowserRouter as Router,
  Redirect,
  Route,
  Switch,
} from 'react-router-dom';

class Login extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <Router>
          <Switch>
        <Route path='/'  component={App} />    
          </Switch>
        </Router>
      </div>
    );
  }
}

//Add on - Sign up form class based 
class SignUp extends React.Component {
  constructor(props) {
    super(props);
    this.state = { stage: 1 };
  }

  render() {
    switch (this.state.stage) {
      case 2:
        return <IdNumber afterSubmit={() => this.setState({ stage: 3 })} />;
        break;
      case 3:
        return <CreatePassword afterSubmit={() => this.setState({ stage: 4 })} />;
      case 4:
        return <Home />;
        break;
      default:
        return <MobileNum afterSubmit={() => this.setState({ stage: 2 })} />;
    }
  }
}