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

Question

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

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

Answer 1

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

所以我的策略是获取窗口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>
        );
    }
}