Fatal编程技术网
  • javascript/
  • Javascript React不使用URL参数呈现组件

Javascript React不使用URL参数呈现组件

javascript reactjs webpack

Javascript React不使用URL参数呈现组件,javascript,reactjs,webpack,react-router,react-router-redux,Javascript,Reactjs,Webpack,React Router,React Router Redux,我正在创建一个包含以下内容的网站： 包含项目列表的页面 显示有关单个项目的更多详细信息的页面 我正在网站上使用react路由器^3.0.0，react路由器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'; impo

我正在创建一个包含以下内容的网站：

  • 包含项目列表的页面
  • 显示有关单个项目的更多详细信息的页面
    • 我正在网站上使用
    react路由器^3.0.0
    ，
    react路由器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')
);
    我尝试了几种方法来解决这个问题，每种方法都会产生相同的错误消息

    ...
<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>
...
    但这不是我想要的URL设置方式。有人知道如何解决这个问题吗？谢谢你的帮助

    如果您不想在
    项目
    中渲染
    项目
    在
    react router
    中，如果将
    /
    放在路径前面，它总是成为一个绝对路由（
    example.org/：itemId
    ），而没有路由则是相对路由（
    example.org/items/：itemId
    ）

    希望这有帮助

    所以这不是
    react路由器
    问题，而是
    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>
    我只是把它改成了

    output: {
    path: path.join(process.cwd(), conf.paths.tmp),
    filename: '/index.js'
}
    它成功了。
    index.js
    文件现在已在源代码中正确链接

    您是否在
    项目
    组件中设置了
    {this.props.children}
    ？因为
    Item
    依赖于
    Item
    ，如果未设置，则
    Item
    将永远不会呈现。@KeithA，这不是只有在嵌套它们时才重要吗？（例如，第二次/第三次尝试）。我尝试将
    {this.props.children}
    放入
    项中，但出现了相同的错误。此外，我不希望
    项目
    组件在
    项目
    内部呈现，因为它们有完全不同的布局。哦，是的，对不起，我应该提到这一点。这是错误
    GET吗http://localhost:3000/items/index.js
    整个错误是什么？你介意发布
    项目
    和
    项目
    组件吗？当我嵌套路由时，我得到两个
    gethttp://localhost:3000/items/index.js
    错误（我不嵌套它时只得到1）。它链接到我的
    index.html
    文件中编译并插入
    index.js
    文件的那一行（在
    标记的末尾）。这就是全部的错误，所以我没有太多要说的了。您介意发布
    项目
    和
    项目
    组件吗？尝试了这个，但没有效果。我仍然收到相同的错误1）您是否有后端服务器在本地运行@TFischer，2）这些错误是否仅在您尝试从浏览器地址栏导航到url时发生，或者在单击带有路径的
    链接时发生？请为我尝试。将
    react router
    中的
    链接添加到您的代码中，然后单击该链接即可查看。

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

    

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

    

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