0

I am trying to go to User view/state after they have logged in and authenticated but can't seem to get react router to do it.

The initial state of the App is just a static nav-bar with views that route properly, but when the user logs in or authenticates i'm unsure what to do. Do I change state of the navbar and create a new react router specifically for the user-loggedin-state?

I don't think I need to use flux just yet because there is no storing of data needed (other than user data)?

Here is what the routes look like:

// 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;

This is the Navbar:

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;

Thought?

rahul2001
  • 1,577
  • 2
  • 17
  • 32

1 Answers1

2

There are a couple things that you still need to do. You don't need flux here but you do need a little bit of state handling. Here is a link to an older commit/explanation of authentication flow from react-router.

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

The reason I posted an older commit is that the most updated ones are using es6 and even an unreleased version I believe. This link should work just fine your cause, though.

Joseph Furlott
  • 136
  • 3
  • Thanks but in that example, where in this render function is the initial state before logging in? Ie., what does the app look like before loggedIn? There is a dashboard after authenticating. var loginOrOut = this.state.loggedIn ? Log out : Sign in; return (
    • {loginOrOut}
    • About
    • Dashboard (authenticated)
    ); } });     – rahul2001 Jun 30 '15 at 16:21
  • The example code you copied only checks to see if the user is logged in or not. If they are logged in, show them the Dashboard option in the navigation, otherwise show them links to the login page. The mixin basically checks to see if the user is logged in as they load that component, and if so direct them to that component (using a page sycned up with react-router), otherwise direct them to the login page so that can be logged in. – Joseph Furlott Jun 30 '15 at 18:29