1

認証を必要とするいくつかのコンポーネントを備えた、かなり基本的なログイン設定 (以下のコード) があります。http://localhost:8000/に移動すると、 http://localhost:8000/loginにリダイレクトされ、すべて問題ありません。その後ログインすると、 http://localhost:8000/に戻り、メイン コンポーネントが表示されます。

ただし、http://localhost:8000/loginに直接移動すると、「/login を取得できません」と表示されます。「about」コンポーネントについても同じことが言えます。ポンド記号を追加すると機能します: http://localhost:8000/#/login。誰が何が起こっているのか説明できますか?

var React = require('react');
var Main = require('./components/main');
var Login = require('./components/login');
var About = require('./components/about');
var SessionStore = require('./stores/session-store')
import createBrowserHistory from 'history/lib/createBrowserHistory';

import { Router, Route, Link, History, IndexRoute } from 'react-router';

var App = React.createClass({

    render: function() {
        return <div>
          {this.props.children}
        </div>
      }
});

function requireAuth(nextState, replaceState) {
  if(!SessionStore.isLoggedIn()){
    replaceState({ nextPathname: nextState.location.pathname }, '/login');
  }
}

function redirectIfLoggedIn(nextState, replaceState){
  if(SessionStore.isLoggedIn()){
    replaceState({ nextPathname: nextState.location.pathname }, '/');
  }
}

var routes = (
  <Router history={createBrowserHistory()}>
    <Route path="/" component={App}>
      <IndexRoute component={Main} onEnter={requireAuth}/>
      <Route path="login" component={Login} onEnter={redirectIfLoggedIn} />
      <Route path="about" component={About} onEnter={requireAuth} />
    </Route>
  </Router>
)

React.render(routes, document.querySelector('.container'));
4

1 に答える 1

1

簡単な答えは、http://localhost:8000/#/loginブラウザの JavaScript アプリで実行されているため/、高速 Web サーバーによって提供されているアプリであり、/(アプリ)#/loginと/#/aboutはサーバーから何も要求していませんが、JS アプリのルートです ( react-routes) さまざまなコンポーネントをレンダリングします。直接入力/loginすると、高速 Web サーバーにクエリを実行する必要がありますが、ルートでアプリを提供するもの以外に、高速サーバー ルートを設定する必要はありません/。

react-routes関連する質問でそれを削除する方法が尋ねられますが、2015 年 10 月にバージョン0.13react-routerから 1.0 に変更され、API が大幅に変更されたことに注意して ください。反応ルータを使用してブラウザで /#/ を停止するには?

于 2015-10-05T22:21:02.207 に答える