使用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 ，請嘗試一下是否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文件中，我找到了一個提到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參數反應不渲染組件

問題描述

2 個解決方案

解決方案1
0 2017-01-27 21:03:08

解決方案2
0 已采納 2017-01-27 22:52:16

使用URL參數反應不渲染組件

問題描述

2 個解決方案

解決方案1 0 2017-01-27 21:03:08

解決方案2 0 已采納 2017-01-27 22:52:16

解決方案1
0 2017-01-27 21:03:08

解決方案2
0 已采納 2017-01-27 22:52:16