react-router(-redux) 不匹配路由答案

【问题标题】：Routes are not matched by react-router(-redux)react-router(-redux) 不匹配路由
【发布时间】：2016-09-02 18:19:46
【问题描述】：

我无法使用 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 进行开发。

但这里是目前相关的代码-sn-ps：

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

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

【问题讨论】：

你在启动webpack-dev-server时是否使用--history-api-fallback标志？
devServer: { historyApiFallback: true } 在 webpack.config.js 中设置
神奇的是，在我将所有软件包升级到最新版本后，路由现在可以正常工作了。

标签： javascript reactjs react-router redux react-router-redux

【解决方案1】：

正如您所说，问题在于您的后端不知道如何处理对/register 的请求。解决方案是告诉您的后端针对此类请求返回 React 应用程序（与对 / 的请求相同）。

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

【讨论】：

我不确定这是否真的是问题所在。在我对客户端路由的理解中，路由器会阻止对服务器的实际 http 请求，而是呈现“路由表”中指定的组件。这不是 react-router 的工作原理吗？在每个请求上发送相同的数据对我来说更像是一种黑客攻击。
@NilsShikora 当您使用 react-routers <Link> 元素导航应用程序时确实如此。但是，如果您直接访问/register，您的服务器显然会收到请求并且必须知道如何处理它。
哦，我还没有想到。还有一点需要说清楚，谢谢。但是反应路由器以任何一种方式都失败了。我在组件中使用 Register 并且转换失败。
过渡失败是什么意思？也可以试试to="register"，注意缺少的斜线。 Dno 如果它会工作
我的意思是即使我单击正确呈现的 Home 组件中的链接，服务器也会响应 404。将链接更改为 to="register" 没有进行任何更改。

【解决方案2】：

您可以使用hashHistory 代替browserHistory。写在react-router's documentation。

当然，您需要配置Link 的to 属性，以便它可以根据hashHistory 的需要正确重定向。稍后，当您使用browserHistory 回来时，您需要再次重新配置这些链接。

【讨论】：