1

我有一个相当基本的登录设置（下面的代码），其中包含一些需要身份验证的组件。当我导航到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'));
4

1 回答 1

1

快速回答，http://localhost:8000/#/login它正在浏览器中的 javascript 应用程序中运行，因此该应用程序/由 express Web 服务器提供服务，因此/(app)#/login并/#/about没有从服务器请求任何内容，而是 JS 应用程序中的路由，( react-routes) 来渲染各种组件。当您/login直接输入时，它必须查询快速网络服务器，但您没有设置任何快速服务器路由，除了在 r​​oot 处为应用程序提供服务的路由/。

所以归根结底react-routes，一个相关的问题询问如何删除它，但请注意，截至 15 年 10 月react-router，从版本 0.13 更改为 1.0，这对 API 进行了相当大的更改，因此在阅读示例时要小心以了解版本 如何使用 react-router 在浏览器中停止/#/？

于 2015-10-05T22:21:02.207 回答