CODEWITHSUNDEEP
reactjsreact-router
strausd
strausd

Reputation: 441

Issue with URL params in react-router

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

Upvotes: 0

Views: 1111

Answers (2)

G_S
G_S

Reputation: 7110

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.

Upvotes: 0

lagerone
lagerone

Reputation: 1767

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>

Upvotes: 1

Related Questions