组件未以React Router多步骤形式呈现

Question

因此我使用React Router和Formik创建了一个多步骤表单。香港专业教育学院基于本文的预订应用程序。

https://codedaily.io/tutorials/50/Create-a-Form-Wizard-with-Data-Loss-Prevention-using-Formik-and-React-Router

ive记下了基本路由。我只是想在用户登陆/ make-a-booking网址时将用户重定向到我的预订表格的第1部分。它非常简单，但我不确定是否缺少某些内容。因此，问题是ContactSection不呈现任何内容。是否可以仅使用formik来创建多步骤表单？

这是githib存储库的链接。 https://github.com/umxr/booking-form

这是App.js的代码

import React, { Component } from 'react';
import FormWizard from './components/FormWizard';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import About from './components/About';
import Contact from './components/Contact';
import Home from './components/Home';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Router>
            <Switch>
                <Route exact path="/" component={Home} />
                <Route exact path="/make-a-booking" component={FormWizard} />
                <Route exact path="/about" component={About} />
                <Route exact path="/contact" component={Contact} />
            </Switch>
        </Router>
      </div>
    );
  }
}

export default App;

这是FormWizard.js的代码

import React, { Component } from 'react';
import Layout from './Layout';
import { BrowserRouter as Router, Switch, Route, Redirect } from "react-router-dom";
import { Formik, Form } from "formik";
import ContactSection from './sections/ContactSection';
import PhoneSection from './sections/PhoneSection';

class FormWizard extends Component {
    render() {
        return (
            <Layout>
                <Switch>
                    <Redirect from="/make-a-booking" to="/make-a-booking/contact" />
                    <Route exact path="/make-a-booking/contact" component={ContactSection} />
                    <Route exact path="/make-a-booking/phone" component={PhoneSection} />
                </Switch>
            </Layout>
        )
    }
}

export default FormWizard;

contactSection和PhoneSection当前仅沿“ this is the phone section”等行呈现字符串。