reactjs – 如何呈现NotFound组件react-router-config

我是新的反应我想用反应路由器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,
    },
]

index.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

为何不同布局？

我有共同的标题(或)登录标题,将显示在配置文件页面和私人布局组件上.要清楚配置文件页面将显示甚至用户注销但私人布局内容将不会显示它将被重定向

示例导入

import React,{Component} from 'react';


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

export default {
    component:NotFound
}

更新Zarcode后我得到了一个错误

index.js:2177 Warning: React does not recognize the computedMatch
prop on a DOM element. If you intentionally want it to appear in the
DOM as a custom attribute, spell it as lowercase computedmatch
instead. If you accidentally passed it from a parent component, remove
it from the DOM element.
in div (at index.js:39)
in Switch (at index.js:38)
in Router (created by BrowserRouter)
in BrowserRouter (at index.js:37)
in Provider (at index.js:36)

和HTML呈现看起来像这样

更新#2

我注意到有线行为如果我更改了私有路由中的notFound组件它正在工作但问题是它只适用于Logged in Routes.

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

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

确保在渲染时将路径包装在 <Switch>中：

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

编辑：

您应该将路径添加到PublicLayout,因为没有路径的路由始终匹配(如您所读,可以阅读here)并且不要让NotFound始终匹配.