0

我坚持使用 react、redux、react-router 和 react-redux-router 绑定创建单页应用程序。

路由http://localhost:3001/register根本不被路由器匹配,并Cannot GET /register返回给浏览器,因为服务器显然不知道路由。我对 react-redux 堆栈相对较新,可能缺少一些非常基本的东西。

编辑:IndexRoute 正在工作并在 App-Compontent 中显示 Home-Component。

Edit2:我没有使用服务器端渲染,而是使用 webpack-dev-server 进行开发。

但到目前为止,这里是相关的代码片段:

entry.js

const store = createStore( 
    reducer, //from reducers.js
    applyMiddleware(routerMiddleware(browserHistory))
);

const history = syncHistoryWithStore(browserHistory, store);

render(
    <Provider store={store}>
        <Router history={history} routes={routes} />  //routes from routes.js
    </Provider>,
    document.getElementById('app')
 );

减速器.js

const rootReducer = combineReducers({
    RegisterForm,
    routing: routerReducer //provided by react-router-redux
});

export default rootReducer;

路由.js

const routes = (
    <Route path='/' component={App}>
        <IndexRoute component={Home} />
        <Route name='register' path='register' component={RegisterForm} />
    </Route>
);

export default routes;

Navigation.jsx(在 App.jsx 中呈现)

import React from 'react';
import {Link} from 'react-router';

export default class Navigation extends React.Component {
  render() {
    return (
      <div className="mdl-layout mdl-js-layout mdl-layout--fixed-header">

        <header className="mdl-layout__header">
          <div className="mdl-layout__header-row">
            <span className="mdl-layout-title">there!</span>
            <div className="mdl-layout-spacer"></div>
            <nav className="mdl-navigation mdl-layout--large-screen-only">
              <Link className="mdl-navigation__link" to="/">Home</Link>
              <Link className="mdl-navigation__link" to="register">Register</Link>
            </nav>
          </div>
        </header>

        <div className="mdl-layout__drawer">
          <span className="mdl-layout-title">there!</span>
          <nav className="mdl-navigation">
            <Link className="mdl-navigation__link" to="/">Home</Link>
            <Link className="mdl-navigation__link" to="register">Register</Link>
          </nav>
        </div>

        <main className="mdl-layout__content">
          <div className="page-content">
            {this.props.children}
          </div>
        </main>

      </div>
    );
  }
}

也许对某人来说很明显,我在这里缺少什么。如果您需要更多代码,请告诉我。

4

2 回答 2

2

正如您所说,问题在于您的后端不知道如何处理对/register. /解决方案是告诉您的后端在此类请求上返回反应应用程序(与请求相同)。

如果您使用纯 webpack-dev-server 进行开发,我不能 100% 确定最好的方法是什么,但您可以在这里查看可能有效的答案:Stating directive templateUrl relative to root

于 2016-05-07T22:57:48.333 回答
1

您可以使用hashHistory而不是browserHistory. 它写在react-router 的文档中。

当然,您需要配置Link's toprops 以便它可以根据需要正确重定向hashHistory。稍后,当您重新使用 时browserHistory,您需要再次重新配置这些链接。

于 2016-05-08T10:09:01.793 回答