Question

好吧，我花了三个小时让自己疯狂地试图解决这个问题。我确定我做错了什么，但这是我第一次涉足React，而且我不确定究竟是什么问题。

我的主app文件如下所示：

import React, { PropTypes } from 'react';
import { Provider } from 'react-redux';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import createHistory from 'history/createBrowserHistory'
import routes from './routes.jsx';
import map from 'lodash/map';

import MainLayout from './components/layouts/main-layout.jsx';

const history = createHistory();

const App = ({store}) => (
    <Provider store={store}>
        <Router history={history} basename="/admin-panel">
            <Route component={MainLayout}>
                <Switch>
                    {map(routes, (route, name) => (
                        <Route key={name} path={route.path} exact={route.exact} component={route.component} />
                    ))}
                </Switch>
            </Route>
        </Router>
    </Provider>
);

App.propTypes = {
    store: PropTypes.object.isRequired,
};

export default App;

路由只是一个包含路由信息的JSON对象。例如：

import React from 'react';

import DashboardContainer from './components/containers/dashboard-container.jsx';
import AdminUserContainer from './components/containers/admin-users-container.jsx';

export default {
    dashboard: {
        order:     1,
        path:      '/',
        exact:     true,
        name:      'Dashboard',
        icon:      'tachometer',
        component: DashboardContainer,
    },
    users:     {
        order:     2,
        path:      '/admin-users',
        name:      'Admin Users',
        icon:      'users',
        component: AdminUserContainer,
    }
};

（对象中有无关的东西;侧边栏渲染的内容，也使用此对象进行渲染）

dashboard-component.jsx看起来像这样：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import Dashboard from '../views/dashboard.jsx';

class DashboardContainer extends Component {
    render () {
        return (<Dashboard />);
    }
}

const mapStateToProps = function (store) {
    return store;
};

export default connect(mapStateToProps)(DashboardContainer);

dashboard.jsx看起来像这样：

import React, { Component } from 'react';

class Dashboard extends Component {
    render () {
        return (
            <p>This is a test.</p>
        );
    }
}

export default Dashboard;

但由于某种原因，无论如何，返回的组件都是UnknownComponent。显然，/admin-panel上没有任何内容匹配，我不确定原因。我尝试过移动组件，将路由器东西与MainLayout合并（它只包含不会改变每个请求的东西，比如侧边栏和标题），甚至尝试使用HashRouter而不是BrowserRouter来查看如果这会做任何事情。没有骰子。

熟悉React的人能否告诉我这是不是我在这做什么？

反应路由器不断返回＆＃34;未知对象＆＃34;

0 个答案: