Why is my react Router not working

nav bar
main page area

could you check my code to see if I have everything set up correctly

Why do you have two routers?

good question.

i thought links and routers needed to both be wrapped by routers. i guess ill put the router higher up in the components

nav bar
main page area

yup still nothing i added it to app.js and removed from main and nav

yeah, wrap all your <Route /> tags in one place of your project, typically all under the <BrowserRouter />, links can be then used in any of your other components to access the routes you set up in your main file , example:

import { Link } from 'react-router-dom'

<Link to="/about">About</Link>

where /about would be defined and linked to the component in your main router definition

they have pretty good docs

1 Like

this is the doc that im following. could you give my code a look over and let me know exactly what wrong?

In main.js try adding exact to line 18:

<Route path="/" exact component={Intro} />
1 Like

This worked. any idea why or what exact does?


exact: bool

When true , will only match if the path matches the location.pathname exactly .

Actually it’s this one: https://reacttraining.com/react-router/web/api/Route/exact-bool

next issue is can I switch to a new page without changing the url?

I guess you could use render in the <Route/> instead of component and render component conditionally: https://reacttraining.com/react-router/web/api/Route/render-func

render or component makes no difference

im gonna try adding some GET requests for those url’s in the server but I know there must be a nicer way.

All I want to do is click on a nav button and change the page keeping the components in the same order

yup that’s what i had to do and it works for every url. i wish i didn’t have to touch the server

server file

By doing this you made the use of react router useless.

yeh so how can i reload my page from a link other than "/". without the change then if im at "/about" then it wont render to the browser. how do i fix that without messing with the server?

Your server should have one route:

app.get('*', (req, res) => {
    res.render('index', data);
1 Like

last thing (probably not), I can’t get my favicon to work

views folder

i have the link commented out in the index file but that tag doesnt work anyway. any idea why?

Favicon should be in public

still doesn’t work

both my viewsand public folder get served so it shouldn’t have mad a difference anyway

Try this: https://github.com/expressjs/serve-favicon