反应路由器的奇怪导航问题

Question

我有一个相当基本的登录设置(下面的代码)和一些需要认证的组件。当我导航到http://localhost:8000/时，它会重定向到http://localhost:8000/login，一切都很好。如果我随后登录，它将返回到http://localhost:8000/并显示我的主要组件。

然而，当我直接导航到http://localhost:8000/login时，它会说“无法获得/login”。我的“关于”部分也是一样的。当我添加一个磅符号：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'));

Answer 1

快速回答，http://localhost:8000/#/login在浏览器中的javascript应用程序中运行，所以它是由快速web服务器从/提供的应用程序，因此/( app )#/login和/#/about不是从服务器请求任何东西，而是JS应用程序(react-routes)中用于呈现各种组件的路由。当您直接进入/login时，它必须查询快速web服务器，但除了在根/上为应用程序提供服务之外，您没有设置任何快捷服务器路由。

因此，关于react-routes，一个相关的问题询问如何删除它，但请注意，从10月15日起，react-router从0.13版改为1.0版，这对API有很大的影响，所以在阅读示例以了解How to stop /#/ in browser with react-router?版本时要小心