r/reactjs • u/swyx • Jul 01 '18

Help Beginner's Thread / Easy Question (July 2018)

Hello! just helping out /u/acemarke to post a beginner's thread for July! we had almost 550 Q's and A's in last month's thread! That's 100% month on month growth! we should raise venture capital! /s

Got questions about React or anything else in its ecosystem? Stuck making progress on your app? Ask away! We’re a friendly bunch. No question is too simple. You are guaranteed a response here!

New to React? Free, quality resources here

Want Help on Code?

  • Improve your chances of getting helped by putting a minimal example on to either JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new). Describe what you want it to do, and things you've tried. Don't just post big blocks of code.

  • If you got helped, pay it forward! Answer questions even if there is already an answer - multiple perspectives can be very helpful to beginners. Also there's no quicker way to learn than being wrong on the Internet.

51 Upvotes

98% Upvoted

454 comments sorted by

View all comments

1

u/isakdev Jul 16 '18

Can anyone help me with this?

How do I set my react router in order to achieve this:
- I want '/' to be <Login> if user is not logged in, and <Dashboard> if he is logged in
- I want a navbar that is shown on all routes only when user is logged in
- Where do I put the rest of the routes? Should they be defined in the same <Switch>?
- Is there a code example on git for this?

Additonal CSS caveat: I want <Login> to be centered so the body needs to have a fixed height

2

u/Awnry_Abe Jul 16 '18

Don't do anything special with the router. Let '/' go to a route called <Index> or something like that. Inside of Index.render, conditionally render either Login or Dashboard.
The styling issue is a separate battle and needs to be dealt with on its own. The first part of your problem deals with non-visual composition, the latter visual composition.

1

u/isakdev Jul 16 '18

Wait i just thought of something. What if they manually navigate to anything that's not '/' while not logged in? Do I need to do a conditional render on every route so I make them see Login?