【发布时间】：2017-06-13 14:16:29
【问题描述】：
我正在创建一个包含以下内容的网站：
- 包含项目列表的页面。
- 将显示有关单个项目的更多详细信息的页面
我在站点中使用react-router ^3.0.0、react-router-redux ^4.0.7 和webpack 2.1.0-beta.20。我正在尝试像这样设置我的路线：
import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import thunk from 'redux-thunk';
import {Router, Route, browserHistory} from 'react-router';
import {combineReducers, createStore, applyMiddleware} from 'redux';
import {Provider} from 'react-redux';
import {routerReducer, syncHistoryWithStore} from 'react-router-redux';
import {IntlProvider, intlReducer} from 'react-intl-redux';
import {addLocaleData} from 'react-intl';
import en from 'react-intl/locale-data/en';
import {Home} from './app/components/Home/Home';
import Profile from './app/components/Profile/Profile';
import Login from './app/components/Login/Login';
import SignUp from './app/components/SignUp/SignUp';
import Items from './app/components/Items/Items';
import Item from './app/components/Item/Item';
import {requireAuthentication} from './app/components/General/AuthenticatedComponent';
import {reducers} from './app/reducers/reducers';
import {i18n} from './app/i18n/i18n';
import './index.scss';
addLocaleData([
...en
]);
// Create the store from the reducers
const store = createStore(combineReducers({
reducers,
routing: routerReducer,
intl: intlReducer
}), i18n, applyMiddleware(thunk));
// Create an enhanced history that syncs navigation events with the store
const history = syncHistoryWithStore(browserHistory, store);
ReactDOM.render(
<Provider store={store}>
<IntlProvider locale="en" defaultLocale="en">
<Router history={history}>
<Route path="/" component={Home}/>
<Route path="/profile" component={requireAuthentication(Profile, true)}/>
<Route path="/login" component={requireAuthentication(Login, false)}/>
<Route path="/signup" component={requireAuthentication(SignUp, false)}/>
{/* Items route lists all of the items, Item shows details for one individual item */}
<Route path="/items" component={Items}/>
<Route path="/items/:itemId" component={Item}/>
</Router>
</IntlProvider>
</Provider>,
document.getElementById('root')
);
Items 和 Item 组件是不相关的，不相互依赖。
当我导航到http://localhost/items 时，Items 组件会呈现。但是当我导航到http://localhost/items/1 时，没有任何渲染，并且我在控制台中收到以下错误：
GET http://localhost:3000/items/index.js
我尝试了几种方法来解决这个问题，每种方法都会导致相同的错误消息
...
<Route path="/items" component={Items}/>
<Route path="/items/:itemId" component={Item}/>
...
...
<Route path="/items" component={Items}>
<Route path="/:itemId" component={Item}/>
</Route>
...
...
<Route path="/items">
<IndexRoute component={Items}/>
<Route path="/:itemId" component={Item}/>
</Route>
...
当我这样做时，我可以让 Item 组件与参数一起呈现
...
// Navigate to http://localhost:3000/1
<Route path="/:itemId" component={Item}/>
...
但这不是我希望设置 URL 的方式。有谁知道如何解决这个问题？感谢您的帮助！
【问题讨论】：
-
您在
Items组件中设置了{this.props.children}吗？因为Item依赖于Item，如果没有设置Item将永远不会渲染。 -
@KeithA，只有嵌套它们才重要吗？ （例如，第 2 次/第 3 次尝试）。我曾尝试将
{this.props.children}放入Items，但出现相同的错误。此外，我不希望Item组件在Items内部呈现，因为它们具有完全不同的布局。 -
哦，是的，对不起，我应该提到这一点。这个错误
GET http://localhost:3000/items/index.js是整个错误吗？您介意发布Item和Items组件吗？ -
当我嵌套路由时，我得到两个
GET http://localhost:3000/items/index.js错误（当我不嵌套它时我只得到1）。它链接到我的index.html文件中编译和插入index.js文件的行（在<body>标记的末尾）。这就是整个错误，所以我没有什么可做的 -
嗯，好的。您介意发布
Item和Items组件吗？
标签： javascript reactjs webpack react-router react-router-redux