URL parameter in react Class Component

Question

I'm trying to pass parameter to component using URL.I'm using react component not functionnel component so I can't use hooks? How can I read url parameter in class component ? I'm trying to pass parameter to a component so it can depending on parameter fetch data from database and update it or just create a new record! Thanks

Are you really using the core `react-router`, or are you rather using `react-router-dom` or `react-router-native`? Or something else entirely? — Drew Reese, Feb 20 '20 at 09:06

score 2 · Answer 1 · answered Feb 20 '20 at 08:59

2

You can use window.location to read the URL parameters

answered Feb 20 '20 at 08:59

NirG

746
5
12

score 2 · Accepted Answer · answered Feb 20 '20 at 09:03

2

You can use the withRouter HOC decorator. This decorates a component (either class-based or functional) and injects match, location, and history props.

import React from "react";
import PropTypes from "prop-types";
import { withRouter } from "react-router";

// A simple component that shows the pathname of the current location
class ShowTheLocation extends React.Component {
  static propTypes = {
    match: PropTypes.object.isRequired,
    location: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired
  };

  render() {
    const { match, location, history } = this.props;

    return <div>You are now at {location.pathname}</div>;
  }
}

// Create a new component that is "connected" (to borrow redux
// terminology) to the router.
const ShowTheLocationWithRouter = withRouter(ShowTheLocation);

The match prop is the one that allows you to access the URL params

this.props.match.params

answered Feb 20 '20 at 09:03

Drew Reese

165,259
14
153
181

I'm getting × TypeError: Cannot read property 'params' of undefined – Marwane Hcine Feb 20 '20 at 09:10
@MarwaneHcine Did you decorate your component? If you are having trouble you can always update your question to include actual code and we can better guide/direct you. A good example code snippet would be your entire component code and your router so we can see how routes are configured and what URL parameters you have. – Drew Reese Feb 20 '20 at 09:12
Thanks !. Im simply trying to render a component with parameter, depending in the parameter the user will create a new record in database or fetch old record and update it! – Marwane Hcine Feb 20 '20 at 09:19
I keep getting this error :'You should not use or withRouter() outside a ' – Marwane Hcine Feb 20 '20 at 09:44
Yes, somewhere near the root of your app should be *a* router, wrapping the bulk of your app. This really would be much easier or faster if you shared your code, without it no one can point out what and where you may have issues. – Drew Reese Feb 20 '20 at 09:47
it is working now . I have just to import withrouter with import { withRouter } from 'react-router-dom'; – Marwane Hcine Feb 20 '20 at 10:06

score 0 · Answer 3 · answered May 07 '23 at 09:14

You can send match as a parameter to the router. Router.js

class Paths extends Component {
  render() {
return (
  <div>
    <Routes>
      <Route
        exact
        path="/pallete/:name"
        element={(match) => {
          return <Pallete id={match} />;
        }}
      />
      <Route exact path="/" element={<Home />} />
    </Routes>
  </div>
);

} }

Pallete.js

class Pallete extends Component {
  constructor(props) {
  super(props);
  this.state = {
   contrast: 100,
   copyValue: "",
   id: this.props,
 };
 console.log(this.state.id);
 }
}

Output:

{id: 'flat-ui-colors-american'}

URL parameter in react Class Component

3 Answers3

Linked