reactjs - 如何渲染NotFound组件react-router-config

Question

我是 react 新手，我想用react router 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

为什么布局不同？

我有通用标题(或)登录标题要显示在个人资料页面和私有(private)布局组件上。需要明确的是，即使用户注销，个人资料页面也会显示，但私有(private)布局内容不会显示，它将被重定向

导入示例

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

我注意到有线行为如果我更改了私有(private)路由内的 notFound 组件，它正在工作，但问题是它仅适用于登录路由。

...
    {
                ...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永远匹配。