使用反应路由器更改应用程序状态的问题

Question

我正在尝试在用户登录并通过身份验证后转到用户视图/状态，但似乎无法让反应路由器执行此操作。

应用程序的初始状态只是一个静态导航栏，其中包含正确路由的视图，但是当用户登录或验证时，我不确定该怎么做。我是否要更改导航栏的状态并专门为用户登录状态创建一个新的反应路由器？

我认为我还不需要使用通量，因为不需要存储数据（除了用户数据）？

以下是路线的样子：

// React
var React = require("react");
var Router = require("react-router");
var Route = Router.Route;
var NotFoundRoute = Router.NotFoundRoute;
var DefaultRoute = Router.DefaultRoute;

var App = require('./components/App.js');
var About = require('./components/About.js');
var Concat = require('./components/Concat.js');
var Home = require('./components/Home.js');
var Landing = require('./components/Landing.js');
var Login = require('./components/Login.js');
var Search = require('./components/Search');
var Signup = require('./components/Signup');


var routes = (
  <Route path="/" handler={App}>
    <DefaultRoute handler={Landing} />
    <Route name="about" path='/about' handler={About}/>
    <Route name="concat" path='/concat' handler={Concat}/>
    <Route name="home" path='/home' handler={Home}/>
    <Route name="login" path='/login' handler={Login}/>
    <Route name="search" path='/search' handler={Search}/> 
    <Route name="signup" path='/signup' handler={Signup}/>       
  </Route>

);

module.exports = routes;

这是导航栏：

var React  = require('react');
var Router = require('react-router');
var Link = Router.Link;

var Navbar = React.createClass({



  render: function () {
    return (
      <div className="navbar navbar-default navbar-static-top">
        <div className="container">
          <div className="navbar-header">
            <button type="button" className="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
              <span className="icon-bar">test</span>
              <span className="icon-bar"></span>
              <span className="icon-bar"></span>
            </button>
          </div>
          <div className="collapse navbar-collapse">
            <ul className="nav navbar-nav">
              <li className="active"><Link to="home">Jobletics</Link></li>
              <li><Link to="concat">Create a Listing</Link></li>
              <li><Link to="search">Search Jobs</Link></li>
              <li><Link to="about">About</Link></li>
            </ul>
            <ul className="nav navbar-nav navbar-right">
              <li><Link to="login">Log in</Link></li>
              <li><Link to="signup">Sign up</Link></li>
            </ul>
          </div>
        </div>
      </div>
    );
  }
});

module.exports = Navbar;

想过吗？

Answer 1

您仍然需要做几件事。您在这里不需要通量，但您确实需要一点状态处理。这是一个链接到一个 older 提交/解释来自 react-router 的身份验证流程。

https://github.com/rackt/react-router/blob/de9f8098baee3b5d24b1c337dc9aa0e7439a295e/examples/auth-flow/app.js

我发布较旧的提交的原因是最新的提交使用的是 es6，甚至我认为是未发布的版本。不过，此链接应该可以正常工作。