router links are not loading the compoenent

Question

  <div className="app">
        <Router>
          <Link
            to="/dashboard"
            style={{ width: "25rem", marginLeft: "50px", marginTop: "50px" }}>
            Passing Props
          </Link>
          <Link
            to="/"
            style={{ width: "25rem", marginLeft: "50px", marginTop: "50px" }}>
            Home
          </Link>
          <Link
            to="/signin"
            style={{ width: "25rem", marginLeft: "50px", marginTop: "50px" }}>
            signin
          </Link>
          <Link
            to="/signup"
            style={{ width: "25rem", marginLeft: "50px", marginTop: "50px" }}
          >
            signup
          </Link>
          <Switch>
            <Route
              path="/dashboard"
              component={() => <AWSConnection topic={this.state.topic} />}
            />
            <Route path="/" />
            <Route path="/signup" component={SignInForm}/>
            <Route path="/signin" component={SignUpForm}/>
          </Switch>
        </Router>

 </div>

only Home and dashboard are working the other two are not showing anything

my imports are

import {BrowserRouter  as Router, Route, Link, Switch} from 'react-router-dom'

when i click Home it goes to home and when i click dashboard it goes to dashboard but when i click signin or signup nothing happens. i see url change to/signin and /singup but nothing displayed. i tested with a dummpy component insteat of signin and singup still the same it cant load the dummpy component

The code seems fine to me. Can you check if you have imported the SignInForm and SignUpForm correctly? or can you make a sandbox where we can test your code — Niloy, Jul 08 '20 at 00:13

score 2 · Answer 1 · answered Jul 08 '20 at 00:26

2

Use the "exact" prop. Your router is going through all your defined routes and returning the first available match in this case "/" is the first available match for all your routes.

answered Jul 08 '20 at 00:26

j-Riv

21
4

1

Thanks for the details. i changed the order and used exact – mahone Jul 08 '20 at 00:38

score 1 · Answer 2 · answered Jul 08 '20 at 00:32

you can either set the exact prop on the router, or can change your routes to:

<Switch>
  <Route 
    path="/dashboard" 
    component={() => <AWSConnection topic={this.state.topic} />}
  />
  <Route path="/signup" component={SignInForm} />
  <Route path="/signin" component={SignUpForm} />
  <Route path="/" />
</Switch>

The Switch component will return the first compatible route, and / is compatible with everything.

You can go here for the react router official docs.

score 0 · Answer 3 · answered Jul 08 '20 at 00:15

0

Try using the "exact" prop in every Route component:

<Route path="/signin" exact component={SignUpForm}/>

Doing so, will make your Switch render only the component you want.

answered Jul 08 '20 at 00:15

Pascal Arevalo

46
2

router links are not loading the compoenent

3 Answers3