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

Question

我有一个相当基本的登录设置（下面的代码），其中有几个组件需要身份验证。当我导航到 http://localhost:8000/, it redirects to http://localhost:8000/login and everything is fine. If I then log in, it goes back to http://localhost:8000/ 并显示我的主要组件时。

但是，当我导航到 http://localhost:8000/login directly, it says "Cannot GET /login". Same thing with my "about" component. It does work when I add a pound symbol: 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 应用程序中是运行，因此该应用程序由 Express Web 服务器从 / 提供，因此 /(app)#/login 和 /#/about 没有从服务器请求任何东西，而是 JS 应用程序中的路由，(react-routes) 以呈现各种组件。当您直接输入 /login 时，它必须查询快速 Web 服务器，但是您没有设置任何快速服务器路由，除了在根 /.[=21= 为应用程序提供服务的路由之外]

所以它下降到 react-routes，一个相关的问题询问如何删除它，但请注意从 2015 年 10 月起 react-router 从版本 0.13 更改为 1.0，这改变了 API 很多，所以在阅读示例时要小心，注意版本 How to stop /#/ in browser with react-router?

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

Strange navigation issue with react-router

reactjs

react-router

react-router-component