javascript - ReactJS和带有react-router v4的嵌套路由

我正在使用ReactJS创建一个网站，并且正在使用react-router v4浏览网站页面。
我正在尝试使用嵌套的路由来实现与上图所示相同的结果。
更清楚地说，我想使用某种布局组件，其中页眉和页脚保持不变，并且每次单击下一个或上一个按钮时，仅更改中间的内容。 “ home_page”和“ create_record”页面具有相同的布局，并且3个步骤的页面共享home_page的另一个布局。就像Airbnb样式的布局和导航一样。

关于如何实现此目标的任何建议？

最佳答案

这是我的解决方案。这可能不太有效，但这对我有效。

所以我的策略是获取窗口URL并检查步骤。

在这里，我创建8个文件。


标头
页脚
Home.js
NewRecord.js
Steps.js
StepOne.js
StepTwo.js
StepThree.js


我将仅描述App.js和Steps.js。其他取决于您。

App.js

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import Home from './Home'
import NewRecord from './NewRecord'
import Steps from './Steps'

const App = () => {

return (
    <Router>
        <Switch>
            <Route exact path="/" component={Home}/>
            <Route exact path="/new_record" component={NewRecord}/>
            <Route path="/new_record/step_1" component={Steps}/>
            <Route path="/new_record/step_2" component={Steps}/>
            <Route path="/new_record/step_3" component={Steps}/>
        </Switch>
    </Router>
    )

}

export default App

Steps.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import Header from './Header';
import Footer from './Footer';

import StepOne from './StepOne';
import StepTwo from './StepTwo';
import StepThree from './StepThree';

export default class Steps extends Component {
    constructor (props) {
        super(props)
        this.state = {
            url : window.location.href,
            currentStep: 0
        }
    }

    checkCurrentStep = () => {
        // check the url using javascript search() method
        if (this.state.url.search('step_1') != -1) {
            this.state.currentStep = 1;
        } else if (this.state.url.search('step_2') != -1) {
            this.state.currentStep = 2;
        } else {
            this.state.currentStep = 3;
        }
    }

    componentWillMount () {
        this.checkCurrentStep()
    }

    render() {
        return (
            <div>
                <Header />
                { (this.state.currentStep == 1) ? <StepOne /> :
                  (this.state.currentStep == 2) ? <StepTwo /> :
                  <StepThree />
                }
                <Footer />
            </div>
        );
    }
}