CODEWITHSUNDEEP
reactjs
user8758206
user8758206

Reputation: 2191

Basic React Route with dynamic ID not rendering component

I'm trying to figure out why the component SubPage is not rendering whenever the route path of /sub/:_id is visited (e.g. /sub/5f1c54257ceb10816a13d999). This is the first time I've worked with react routes. The :_id part should presumably accept query parameters from the URL dynamically so I cannot see why this is not working.

I can get the /subs page to fetch the API and render each sub on the page but just not each individual sub page.

The route is as follows near the bottom of App.js: <Route path={"/sub/:_id"} component={SubPage} />

Thanks for any help here. I've made a stackblitz for convenience, or you can see the relevant code below:

And subPage.js:

import React from 'react'

export class SubPage extends React.Component {
    render() {
        return (
            <div className="sub-details-individual">
                <h1 class="std-intro">Viewing a Single Subscriber</h1>
                <div className="sub-specs">
                    <div className="sub-specs-inner">
                        id: {this.props.params._id}
                    </div>
                </div>
            </div>
        )
    }
}

And App.js:

import React, {Component} from "react";
import {navLinks} from "./components/nav-links";
import Root from "./components/Root";
import {
  BrowserRouter as Router,
  Switch,
  Route
} from "react-router-dom";
import {SubPage} from "./components/subPage";
import ShowSubs from "./components/show-subs";

export default class App extends Component {
  constructor() {
    super();

    this.state = {
      navLinks: navLinks,
      intro: "hello world",
      url: "someurl"
    }
  }

  updateURL = (newUrl) => {
    this.setState({
      url: newUrl
    })
  }

  render() {
    return (
      <Router>
        <Root navLinks={this.state.navLinks} intro={this.state.intro}></Root>

        <Switch>
          <Route path="/subs">
            <p>subs page</p>
            {/*this.updateURL('/subs') fails presumably because it causes the rerender infinitely - but how to solve?*/}
            <ShowSubs />
          </Route>
          <Route path="/">
            <p>homepage</p>
          </Route>
          <Route path={"/sub/:_id"} component={SubPage} />
        </Switch>
      
        <p>the url: {this.state.url}</p>
      </Router>
    );
  } 
}

Upvotes: 0

Views: 614

Answers (1)

kind user
kind user

Reputation: 41893

Two things:

  • this.props.params._id will crash since you are missing match before params

this.props.match.params._id

  • few exact props are missing, especially in the subs path:

<Route exact path="/subs">

Note: the exact prop will be useful in the / route as well.

Upvotes: 2

Related Questions