router.js 主结构复用方法

回到主页

router.js 主结构复用方法

· reactjs,dva

router.js 主结构复用方法，网页复用同个框架


 < Router history={history}>
            < MuiThemeProvider theme={theme}>
                < WebsiteApp id="layout">
                    < Switch>
                        < Route path="/" exact component={WebsiteLogin} />
                        < Route path="/WebsiteAbout" exact component={WebsiteAbout} />
                        < Route path="/WebsiteCusSer" exact component={WebsiteCusSer} />
                    < /Switch>
                < /WebsiteApp>
            < /MuiThemeProvider>

使用上图的方法即可使所有的网页都复用WebsiteApp框架，缺点是在页面层次比较深的情况下，框架里的页面可能会没有及时更新。


 < Router history={history}>
            < MuiThemeProvider theme={theme}>
               < div id="layout">
                    < Switch>
                        < Route path="/Login" exact component={WebsiteLogin} />
                        < Route path="/WebsiteAbout" exact component={WebsiteAbout} />
                        < Route path="/WebsiteCusSer" exact component={WebsiteCusSer} />
                    < /Switch>
                < /div>
            < /MuiThemeProvider>
< /Router>

将框架移入到网页内容


   < WebsiteApp>
     
        网页的信息
     
   < /WebsiteApp>

使用上图的方法，可以在层次较深的情况下，正常引用框架。



        currentAbout: { ...website.currentAbout },
        currentLength: website.currentAbout.length,
        currentContent: website.currentAbout[website.currentPosition] || '',

当数组和对象出现为及时更新的情况下，可以通过上图的方法进行响应。