使用 URL 参数反应不渲染组件

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>
...

不过，当我这样做时，我能够让 Item 组件使用参数进行渲染

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

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

Answer 1

如果您不想在 Items

内渲染 Item，请尝试这样做是否有效

<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 文件中，我找到了一个部分提到 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'
}

它奏效了。 index.js 文件现在已在源

中正确链接

使用 URL 参数反应不渲染组件

React not rendering component with URL param

javascript

reactjs

webpack

react-router

react-router-redux