[Help]Routing and logging in/out

[reactgo]

[Help]Routing and logging in/out

[kkotwal94]

Ok so I kinda understand how it works now, handler renders whatever we import, and and I changed the way my structure works as well.

<App>
 <Navbar >
   <NavMenu>
      <li className="cd-selected">
        <Link to="dashboard">Dashboard</Link>
      </li>

      <li>
        <Link to="reports">Reports</Link>
      </li>

      <li>
        <Link to="employees">Employees</Link>
      </li>

      <li>
        <a href="/logout">Logout</a>
      </li>

      <li>
        <Link to="addReport">Create New Report</Link>
      </li>
    </NavMenu>
 <RouteHandler />

Where my router is..

<Route>
 <Route name ="signup" path="/signup" handler={Signup} />
 <Route name ="login" path="/" handler={Login} />
 <Route name ="dash" path="/dashboard" handler={App}>
    <Route name ="dashboard" path="/dashboard" handler={Dashboard}/>
    <Route name ="reports" path="/reports" handler={Report} />
    <Route name ="employees" path="/employees" handler={Employees} />
    <Route name ="addReport" path="/addReport" handler={AddReports} />
 </Route>
</Route>

I don't know if I did the "dash" one correctly, but its working, on login it redirects to /dashboard in the express server, /dashboard is filled with {App} and app does its thing.

However I would still like to understand how to do logout in react router rather than express. When I add

<Route name ="logout" path="/logout" />

and then add the Link in the NavMenu, it just takes me to /logout rather than performing the same action as it would in the express server if it was at that route. I think my misunderstanding lies in that I thought by setting a route in react-route it would behave just as the one in my express server, idk If i even said that with any type of sense.

[choonkending]

@kkotwal94 Hey thanks for commenting!

It feels like your question is more regarding how react-router works.

I added a Logout action to my link, and made an API call to the /logout endpoint via Ajax (behind the scenes).

Does that help? Haha :)

[kkotwal94]

Yea it does, sorry for missing the obvious I totally skipped over the UserAPI. I was wondering how we were binding the data to the front end. I finally figured out how react-router works*, now im trying to figure out how flux works and writing react in es6.

[choonkending]

No worries. It might be a bit confusing at first, but now that I use the flux design pattern and es6, I can't go back!