0

react、redux、react-router、react-redux-router バインディングを使用して単一ページ アプリを作成するのに行き詰まっています。

サーバーは明らかにルートを認識していないため、ルートhttp://localhost:3001/registerは単にルーターによって一致せず、ブラウザーに返されます。Cannot GET /register私は react-redux スタックに比較的慣れていないため、かなり基本的なものが欠けている可能性があります。

編集: IndexRoute は機能しており、App-Component 内に 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;

ルート.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% 確信できるわけではありませんが、おそらくうまくいくと思われる答えをここで見ることができます:

于 2016-05-07T22:57:48.333 に答える
1

hashHistoryの代わりに使用できますbrowserHistory。これは、 react-router のドキュメントに書かれています。

もちろん、の必要に応じて適切にリダイレクトされるように、Linkのtopropsを構成する必要がありhashHistoryます。後で を使用するようになったときに、browserHistoryこれらのリンクを再構成する必要があります。

于 2016-05-08T10:09:01.793 に答える