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>
        );
    }
}

ReactJS和使用react-router v4的嵌套路由

1 个答案: