CODEWITHSUNDEEP
javascriptreactjsreact-router-v4
karolis2017
karolis2017

Reputation: 2415

Path matches Route but the component for that route is not rendered

my component for the Route is this:

const Workout = props => {
  console.log(props);
  return (
    <div>
      <h1>hello</h1>
    </div>
  );
};

export default Workout;

then I import this component to my index.js

import Workout from "./views/Workout";

then I define my Route:

<Route exact path="/:weekId/:dayId:/work" component={Workout} />

I hit the route in the browser:

codesandbox.io/week-1/day-1/work

but nothing is rendered, no error and no console.log :(

Upvotes: 1

Views: 25

Answers (1)

Tholle
Tholle

Reputation: 112927

The path variable should be :dayId, not :dayId:.

Example

const Workout = props => {
  console.log(props);
  return (
    <div>
      <h1>hello</h1>
    </div>
  );
};

function App() {
  return (
    <BrowserRouter>
      <Route path="/:weekId/:dayId/work" component={Workout} />
    </BrowserRouter>
  );
}

Upvotes: 1

Related Questions