일회용 경로 설정에 대한 반 조작

모든 경로에 대해 동일한 레이아웃을 사용하는 애플리케이션이 있습니다 (하나만 제외). 하나의 경로는 다른 모든 경로와 완전히 다릅니다.일회용 경로 설정에 대한 반 조작

전체 응용 프로그램에는 메뉴, 본문, 바닥 글 등이 있습니다. 일회용 경로에는 이러한 경로가 없으며 완전히 별개입니다.

반응 앱에서이 일을 어떻게 설정해야합니까? 내가 본/한 모든 것은 항상 루트로 자식을 렌더링하는 하나의 주 래핑 요소를가집니다.

하는 index.js

import React from 'react' 
import ReactDOM from 'react-dom' 
import { BrowserRouter } from 'react-router-dom' 

import { Provider } from 'react-redux' 
import configureStore from './store' 

import App from './components/App' 
// import registerServiceWorker from './registerServiceWorker' 
import { unregister } from './registerServiceWorker' 

const preloadedState = window.__PRELOADED_STATE__ ? window.__PRELOADED_STATE__ : {} 
// console.log('window.__PRELOADED_STATE__', window.__PRELOADED_STATE__) 
delete window.__PRELOADED_STATE__ 

const Store = configureStore(preloadedState) 

const rootEl = document.getElementById('root') 

ReactDOM.hydrate(
    <Provider store={Store}> 
     <BrowserRouter> 
      <App /> 
     </BrowserRouter> 
    </Provider>, 
    rootEl 
) 

if(module.hot){ 
    module.hot.accept('./components/App',() => { 
     ReactDOM.hydrate(
      <Provider store={Store}> 
       <BrowserRouter> 
        <App /> 
       </BrowserRouter> 
      </Provider>, 
      rootEl 
     ) 
    }) 
} 

// registerServiceWorker() 
unregister()

App.js

import React, { Component } from 'react' 
import { withRouter } from 'react-router-dom' 
import { connect } from 'react-redux' 

// Components 
import AppHelmet from './AppHelmet' 
import Notices from './Notices' 
import Header from './Header' 
import Body from './Body' 
import Footer from './Footer' 

// Site state 
import { getSiteInfo } from '../store/actions/siteInfo' 
import { REACT_APP_SITE_KEY } from '../shared/vars' 

// CSS 
import '../css/general.css' 

class App extends Component { 
    initialAction() { 
     this.props.getSiteInfo(REACT_APP_SITE_KEY) 
    } 

    componentWillMount() { 
     // On client and site info has not been fetched yet 
     if(this.props.siteInfo.site === undefined){ 
      this.initialAction() 
     } 
    } 

    render() { 
     return (
      <div> 
       <AppHelmet {...this.props} /> 
       <Notices /> 
       <div className="body"> 
        <Header /> 
        <Body /> 
       </div> 
       <Footer /> 
      </div> 
     ) 
    } 
} 

const mapStateToProps = (state) => { 
    return { 
     siteInfo: state.siteInfo, 
     user: state.user 
    } 
} 

const mapDispatchToProps = (dispatch) => { 
    return { 
     getSiteInfo: (siteKey) => dispatch(getSiteInfo(siteKey)) 
    } 
} 

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(App))

Body.js

import React, { Component } from 'react' 
import { Switch, Route } from 'react-router-dom' 
import routes from '../shared/routes' 

class Body extends Component { 
    render() { 
     return (
      <Switch> 
       {routes.map((route, i) => <Route key={i} {...route} />)} 
      </Switch> 
     ) 
    } 
} 

export default Body

그래서, 당신은 일을 볼 수 e index.js 진입 점은 <App />을 렌더링합니다. <App />은 모든 경로와 내용을 렌더링하는 <Body />을 포함하여 기본 레이아웃을 렌더링합니다.

차갑다.

그러나이 일회용으로 <App /> 레이아웃을 렌더링하는 것을 원치 않으므로이 설정을 index.js에서 어떻게 할 지 모르겠습니다. 나는 그것이 간단하다는 것을 확신하고 다만 응답을 보지 않고있다.

출처

2017-10-25 Gurnzbot

적어도 노력을 보여줄 필요가 있습니다. 당신은 무엇을 시도 했습니까? 작동 했나요? 그렇지 않은 경우 어떤 오류가 발생 했습니까? –

제 잘못입니다. 사람들이 내 소스 코드/구성 요소를 읽을 가치가 있는지 확신하지 못했습니다. 나는 나의 질문이 충분히 분명하다고 생각했다. 사과드립니다. – Gurnzbot

구성 요소의 현재 경로를 확인하고 경로가 –

원하는 것을 얻기위한 한 가지 방법은 라우터를 청취하는 것입니다.

숨기려는 구성 요소에 수신기를 추가 할 수 있습니다.

청취자가 구성 요소를 표시하지 않으려는보기가 있음을 감지하면 해당보기에 표시하지 마십시오.

출처

2017-10-26 14:02:23

일회용 경로 설정에 대한 반 조작

답변

관련 문제