如何渲染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,
    },
]

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警告:React无法识别computedMatch DOM元素上的prop.如果您有意希望它作为自定义属性显示在DOM中,请将其拼写为小写computedmatch .如果您不小心从父组件传递了它,请将其从DOM元素中删除.在Switch中的div(在index.js:38)中的div(在index.js:38处)(在BrowserRouter中创建)在BrowserRouter中(在index.js:37)在Provider中(在index.js:36)

和HTML呈现看起来像这样

更新#2

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

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

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

Answer 1

确保在<Switch>渲染路径时将其换行:

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

编辑:

你应该添加路径,PublicLayout因为路径没有路径总是匹配(你可以在这里阅读)并且不要让你NotFound匹配.