렌더링 방법 NotFound 구성 요소 react-router-config

Question

반응이 새로운 질문입니다. 반응 라우터를 사용하여 서버 측 렌더링을 구현하고 싶습니다. 4이 패키지를 일반 경로를 쓰려면 react-router-config를 사용하고 있습니다.하지만 이유는 없습니다. 찾을 수없는 구성 요소는 사용자들이 냈어가

코드

import Home from './containers/Home'; 
import PrivateLayout from './containers/PrivateLayout'; 
import NewTest from './containers/NewTest' 
import TestBoard from './containers/TestBoard'; 
import Profile from './containers/Profile'; 
import NotFound from './containers/NotFound'; 
import PublicLayout from './containers/PublicLayout'; 
export default [ 
    { 
     ...Home, 
     path:'/', 
     exact:true 
    }, 
    { 
     ...PublicLayout, 
     routes:[ 
      { 
       ...Profile, 
       path:'/@:username', 
       exact:true 
      }, 
      { 
       ...PrivateLayout, 
       routes:[ 
        { 
         ...TestBoard, 
         path:'/home', 
         exact:true 

        }, 
        { 
         ...NewTest, 
         path:'/test/:username', 
         exact:true 
        } 
       ] 
      }, 


     ] 
    }, 
    { 
     ...NotFound, 
    }, 
] 

인덱스를 예상대로 렌더링되지 발견 리디렉션됩니다 인증되지 않은 경우 항상 부모 경로를 액세스하고 부모 노선에 렌더링되지 않습니다. js

import 'babel-polyfill'; 
import React from 'react'; 
import ReactDOM from 'react-dom'; 
import Routes from './Routes'; 
import { Provider } from 'react-redux'; 
import { createStore, applyMiddleware } from 'redux'; 
import reduxThunk from 'redux-thunk'; 
import { renderRoutes } from 'react-router-config'; 
import { BrowserRouter ,Switch} from 'react-router-dom'; 
import reducers from './reducers'; 
import './index.css'; 
import axios from 'axios'; 
import { Map } from 'immutable'; 
import CONFIG from './config' 

const axiosInstance = axios.create({ 
    baseURL:CONFIG.HOST, 
    withCredentials: true 
}); 


const INITIAL_STATE = window.INITIAL_STATE || {}; 

Object 
    .keys(INITIAL_STATE) 
    .forEach(key => { 
     INITIAL_STATE[key] = Map(INITIAL_STATE[key]); 
    }); 


const store = createStore(reducers,INITIAL_STATE, applyMiddleware(reduxThunk.withExtraArgument(axiosInstance))); 

window.store = store; 

ReactDOM.render(
    <Provider store={store}> 
     <BrowserRouter> 
      <Switch> 
       <div>{renderRoutes(Routes)}</div> 
      </Switch> 
     </BrowserRouter> 
    </Provider> 
    , document.getElementById('root')); 

업데이트 # 1

왜 다른 레이아웃?

프로필 페이지와 개인 레이아웃 구성 요소 모두에 공통된 헤더 (또는) 로그인 헤더가 있습니다. 사용자가 로그 아웃해도 프로필 페이지가 표시됩니다. 개인 레이아웃 콘텐츠는 리디렉션됩니다.

예 가져 오기 나는이

하는 index.js과 같은 오류를 가지고

import React,{Component} from 'react'; 


class NotFound extends Component{ 
    render(){ 
     return(
      <h1>Not Found</h1> 
     ) 
    } 
} 

export default { 
    component:NotFound 
} 

Zarcode 응답을 업데이트 한 후 : 2177 경고 : 0을 인식하지 못하는 반작용 DOM 요소에서 소품. 의도적으로 사용자 정의 속성으로 DOM에 표시하려면 computedmatch 대신 소문자로 표기하십시오. 실수로 상위 구성 요소에서 전달한 경우 DOM 요소에서 제거하십시오. 공급자 (하는 index.js에서 (37하는 index.js AT)에 BrowserRouter (BrowserRouter 의해 생성 된) 라우터 (38하는 index.js AT) 스위치 (39하는 index.js AT)에서 DIV : 나는에 NOTFOUND 구성 요소를 변경 한 경우는 유선 행동을 눈치 2

36)

그리고 HTML이

업데이트 #처럼 보였다 렌더 그것이 작동하고있는 사설 경로의 측면에있다.하지만 Routed에 대해서만 작동하는 문제.

... 
    { 
       ...PrivateLayout, 
       routes:[ 
        { 
         ...TestBoard, 
         path:'/home', 
         exact:true 

        }, 
        { 
         ...NewTest, 
         path:'/test/:username', 
         exact:true 
        }, 
        { 
         ...NotFound, 
        }, 
       ] 
      } 
... 

Answer 1

당신이 그들을 렌더링 할 때 <Switch>에 경로를 포장해야합니다 :

<BrowserRouter> 
    <Switch> 
     {renderRoutes(routes)} 
    </Switch> 
    </BrowserRouter> 

편집 : 당신 때문에 라우팅 경로가 항상 일치하지 않고 PublicLayout의 경로를 추가해야합니다

(로 here을 읽을 수 있으며 NotFound이 일치하도록 허용하지 않습니다.

Answer 2

NotFound는 항상 PublicLayout의 경로와 항상 일치하므로 렌더링되지 않습니다.

나는 예를 들어, 네임 스페이스를 추가하는 것이 좋습니다 것 :

export default [ 
    { 
     ...Home, 
     path:'/', 
     exact:true 
    }, 
    { 
     ...PublicLayout, 
     path: '/public', // Added 
     routes:[ 
      { 
       ...Profile, 
       path:'/@:username', 
       exact:true 
      }, 
      { 
       ...PrivateLayout, 
       routes:[ 
        { 
         ...TestBoard, 
         path:'/home', 
         exact:true 

        }, 
        { 
         ...NewTest, 
         path:'/test/:username', 
         exact:true 
        } 
       ] 
      }, 

     ] 
    }, 

    { 
     ...NotFound, 
    }, 
]