路由與react-router（-redux）不匹配

Question

我一直在使用react，redux，react-router和react-redux-router綁定創建一個單頁面應用程序。

路由器根本不匹配路由http://localhost:3001/register ，並且Cannot GET /register返回到瀏覽器，因為服務器顯然不知道該路由。 我對react-redux堆棧相對較新，並且可能缺少一些基本知識。

編輯：IndexRoute正在工作，並在App組件內部顯示Home組件。

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

也許對某人來說很明顯，我在這里所缺少的。 如果您需要更多代碼，請告訴我。

Answer 1

正如您所說，問題在於您的后端不知道如何處理對/register請求。 解決方案是告訴您的后端在此類請求上返回react應用程序（與/請求相同）。

如果您使用純webpack-dev-server進行開發，則我不是100％地確定執行此操作的最佳方法是什么，但是您可以在此處查看可能可行的答案： 聲明相對於root的指令templateUrl

Answer 2

您可以使用hashHistory而不是browserHistory 。 它寫在react-router的文檔中 。

當然，你將需要配置Link的to的道具，因此將根據需要恰當地重定向hashHistory 。 稍后，當您再次使用browserHistory ，需要再次重新配置這些鏈接。