Я создаю веб-сайт, который будет иметь следующее:React не делает компонент с URL PARAM
- страницу, которая содержит список элементов.
- страница, которая будет показывать более подробную информацию о качестве отдельного элемента
Я использую 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-адрес, которые будут создан. Кто-нибудь знает, как решить эту проблему? Спасибо за помощь!
У вас есть '{this.props.children}', установленный в компоненте 'Items'? Потому что 'Item' зависит от' Item', если это не установлено 'Item' никогда не будет отображаться. –
@ KeithA. Разве это не имеет значения, если вы их гнездились? (например.2/3 попытки). Я попытался поставить '{this.props.children}' в 'Items' с той же ошибкой. Кроме того, я не хочу, чтобы компонент 'Item' отображался внутри' Items', так как они имеют совершенно разные макеты. – TFischer
О да, извините, я бы сказал об этом. Является ли эта ошибка «GET http: // localhost: 3000/items/index.js» всей ошибкой? Не возражаете ли вы размещать компоненты 'Item' и' Items'? –