Я пытаюсь перейти к просмотру/состоянию пользователя после того, как они вошли в систему и прошли аутентификацию, но, похоже, не могу заставить маршрутизатор реагировать на это.
Начальное состояние приложения — это просто статическая панель навигации с представлениями, которые правильно маршрутизируются, но когда пользователь входит в систему или аутентифицируется, я не уверен, что делать. Должен ли я изменить состояние панели навигации и создать новый реагирующий маршрутизатор специально для состояния пользователя, вошедшего в систему?
Я не думаю, что мне нужно использовать поток только потому, что нет необходимости хранить данные (кроме пользовательских данных)?
Вот как выглядят маршруты:
// 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;
Мысль?