ReactJS和嵌套路由与react-router v4

Question

我正在制作一个ReactJS网站，我正在使用react-router v4浏览网站页面。 我试图使用嵌套的路线来实现我上传的图中所示的相同结果。 为了更清楚一点，我想要有一些布局组件，其中页眉和页脚保持不变，只有中间的内容随着每次点击到下一个或上一个按钮而改变。 'home_page'和'create_record'页面具有相同的布局，并且3个步骤页面从home_page共享另一个布局。这就像Airbnb风格的布局和导航。

任何有关如何实现这一目标的建议？

Answer 1

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

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

在这里我创建了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> 
     ); 
    } 
}