首页 文章

路由器与react-router（-redux）不匹配

提问于
浏览 次
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')
 );

reducers.js

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

export default rootReducer;

routes.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>
    );
  }
}

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

javascript reactjs react-router redux react-router-redux

2 回答

  • 1

    如你所说，问题是你的后端不知道如何处理 /register 的请求 . 解决方案是告诉您的后端返回响应应用程序（与 / 的请求相同） .

    如果您正在使用纯webpack-dev-server进行开发，那么最好的方法就是这样做，但是你可以看一下这里可能有用的答案：Stating directive templateUrl relative to root

    回复于
  • 1

    您可以使用 hashHistory 而不是 browserHistory . 它写在react-router's documentation .

    当然，您需要配置 Link 的 to 道具，以便根据 hashHistory 的需要正确重定向 . 稍后，当您重新使用 browserHistory 时，需要再次重新配置这些链接 .

    回复于

相关问题