Question

我正在创建一个具有以下内容的网站：

包含项目列表的页面。
将显示有关单个项目的更多详细信息的页面

我在网站中使用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>
...

我可以在执行此操作时使用param渲染Item组件

...
// Navigate to http://localhost:3000/1
<Route path="/:itemId" component={Item}/>
...

但这并不是我想要设置网址的方式。有谁知道如何解决这个问题？谢谢你的帮助！

Answer 1

如果您不想在Item内呈现Items，请尝试这是否有效

<Route path="/items">
  <IndexRoute component={ Items } />
  <Route path=":itemId" component={ Item } />
</Route>

在react-router中，如果您将/放在路径前面，它始终会成为绝对路线（example.org/:itemId），并且路线不相对（example.org/items/:itemId ）。

希望这有帮助！

Answer 2

事实证明，这不是react-router问题，而是webpack问题。我看了一下正在编译的源代码，看起来像这样

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">

        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,7s00" rel="stylesheet">
        <link rel="icon" type="image/png" href="http://fountainjs.io/assets/imgs/fountain.png" />
        <title>My Web App</title>

        <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css></link>
    </head>
    <body>
        <!-- Entry point for the application -->
        <div id="root"></div>

        <script type="text/javascript" src="index.js"></script>
    </body>
</html>

index.js文件应该链接为/index.js，否则它会在路径所在的当前目录中查找。因此，在我的webpack.conf.js文件中，我找到了一个提及的部分{ {1}}

index.js

我只是将其改为

output: {
    path: path.join(process.cwd(), conf.paths.tmp),
    filename: 'index.js'
}

它有效。 output: { path: path.join(process.cwd(), conf.paths.tmp), filename: '/index.js' }文件现在已在源

中正确链接

使用URL参数反应不呈现组件

2 个答案: