Issue with URL params in react-router

Question

I have been trying to follow the docs in using react-router's Router, Route, and Switch components.

But I have been completely unable to get URL parameters working. I can get all other routes working, but anything that involves /:variable, I just cannot seem to get working.

From their docs, they have this code:

import { Switch, Route } from 'react-router'

<Switch>
  <Route exact path="/" component={Home}/>
  <Route path="/about" component={About}/>
  <Route path="/:user" component={User}/>
  <Route component={NoMatch}/>
</Switch>

And I have this:

const AppRouter = () => {
    return (
        <Router>
            <div>
                <Header />

                <Switch>
                    <Route exact path="/" component={HomePage} />
                    <Route path="/pricing" component={PricingPage} />
                    <Route path="/contact" component={ContactPage} />
                    <Route path="/signup" component={SignupPage} />
                    <Route path="/login" component={LoginPage} />
                    <Route path="/forgotpassword" component={ForgotPasswordPage} />

                    <Route path="/resetpassword/:token" component={ResetPasswordPage} />

                    <PrivateRoute path="/dashboard" component={DashboardPage} />
                </Switch>
            </div>
        </Router>
    );
};

Every single component/route works except for /resetpassword/:token and I cannot for the life of me figure out why.

When I go to http://localhost:8000/resetpassword it actually shows me my header component.

When I go to http://localhost:8000/resetpassword/ or http://localhost:8000/resetpassword/123, I get these errors in the console:

GET http://localhost:8000/resetpassword/dist/style.css net::ERR_ABORTED
GET http://localhost:8000/resetpassword/dist/bundle.js 404 (Not Found)

Can anyone spot my mistake?

Here is a link to this file in my current repo if that would help.

Thanks

Do you have any button click or link click where you are navigating to resetpassowrd route? — G_S
– G_S, Commented Mar 3, 2018 at 6:56
No. Right now I am just trying to navigate to it directly. With any string after resetpassword. So http://localhost:8000/resetpassword/123 for example. — strausd
– strausd, Commented Mar 3, 2018 at 6:58

lagerone · Accepted Answer · 2018-03-03 07:24:23Z

1

You are including your script and css file using relative paths in your index.html file. Change it to absolute paths, like this:

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>React Boilerplate Project</title>
    <!-- use absolute path here with starting / -->
    <link rel="stylesheet" href="/dist/style.css"> </head>

<body>
    <div id="root"></div>
    <!-- use absolute path here with starting / -->
    <script src="/dist/bundle.js"></script> </body>

</html>

edited Mar 3, 2018 at 7:24

answered Mar 3, 2018 at 7:23

lagerone

1,78714 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

strausd Over a year ago

That does it! Rookie mistake on my part for sure.

G_S · Accepted Answer · 2018-03-03 10:59:16Z

0

One cause for this issue could be as below

You are trying to request server to get resetpassword/123 page for you where the server is not aware of what it is. You are using react-router and setting up routes at client side.

When you first request for a page(probably localhost 8000), you will get all the javascript files that you need to client side. And from then react router comes into place where if you click on a link, it checks if there are any matched routes at client side and renders appropriate component. Even in your case, if you directly have a button say 'Reset Password' and in this if you say to navigate to resetpassword route, it perfectly works.

If you need your application to work even when URL is directly hit, you should probably make server aswell understand routing. You can take a look at URL Rewriting (if you are using IIS) or someother mechanism where your server understands that it needs to get all the javascript needed first and then navigate to the route you provided.

edited Mar 3, 2018 at 10:59

answered Mar 3, 2018 at 7:11

G_S

7,1302 gold badges27 silver badges54 bronze badges

2 Comments

strausd Over a year ago

I've got my node server setup to always send the same html and js file regardless of what URL is hit. And that is why I am able to directly hit /login or /dashboard and have it work. Based on that it certainly seems like a purely client side issue with the way I am misusing react-router somehow.

G_S Over a year ago

Perfect. If thats the case, can you once add a button and try routing to resetpassword on it? based on that we can check what is causing the issue

Collectives™ on Stack Overflow

Issue with URL params in react-router

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related