首页 文章

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

提问于
浏览 次
4

我是新的反应我想用反应路由器4实现服务器端渲染我使用这个包react-router-config来写普通路由但是我不知道为什么没有找到组件不渲染它总是访问父路由和在父路由中，如果用户未经过身份验证，则会重定向 . 未找到但未按预期呈现

enter image description here

码

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

为何不同布局？

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

示例导入

import React,{Component} from 'react';


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

export default {
    component:NotFound
}

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

index.js：2177警告：React无法识别DOM元素上的computedMatch prop . 如果您故意希望它作为自定义属性显示在DOM中，请将其拼写为小写的computedmatch . 如果您不小心从父组件传递它，请将其从DOM元素中删除 . 在Switch中的div（在index.js：38）中的div（在index.js：38处）（在BrowserRouter中创建）在BrowserRouter中（在index.js：37）在Provider中（在index.js：36）

和HTML呈现看起来像这样

enter image description here

更新＃2

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

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

                    },
                    {
                        ...NewTest,
                        path:'/test/:username',
                        exact:true
                    },
                    {
                        ...NotFound,
                    },
                ]
            }
...
reactjs react-router

3 回答

  • 0

    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,
    },
]
    回复于
  • 5

    其中一条路线

    {
    path: '/pathanme/',
    exact: true,
    strict: true,
    check: routeService.check.auth(),
    name: 'routeName',
    component: componentName,
    cache: 0,
  }

    内部renderRoutes像普通的react-router一样工作

    <Switch {...switchProps}>
      {
        routes.map((route, i) => (
          <Route
            key={route.key || i}
            path={route.path}
            exact={route.exact}
            strict={route.strict}
            render={(props) => {
              const location = route.check && route.check(props);
              if (location) {
                props.history.push(location);
                return null;
              }
              return (
                <route.component
                  {...props}
                  {...extraProps}
                  route={route}
                />
              );
            }}
          />
        ))
      }
    </Switch>

    这就是如何渲染路由在内部工作 .

    我在 < Route > 中添加了一个渲染道具，你可以在这里找到自己的逻辑 . 我已经从名为 check 的路线传递了另一个属性，其中我在'm checking that user is loggedin or not. Accordingly I' m加载组件 .

    回复于
  • 0

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

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

    EDIT:

    您应该将路径添加到 PublicLayout ，因为没有路径的路径始终匹配（因为您可以阅读here）并且不要让 NotFound 匹配 .

    回复于

相关问题