1

I have a URL structure like so http://localhost:3001/article?id=12345 and I want to route the article ID parameter into a React Component. My Route is like this <Route path="/article?id=" component={ArticleDetail}/> and at the moment I am just trying to get it to print out the value of the parameter in my component like so:

class ArticleDetail extends Component {
    render() {
        const {location} = this.props.location;

        return (
            <div>
                <h2>Article Detail</h2>
                <p>This will show the full Article detail</p>
                <p>props: {location}</p>
            </div>
        );
    }
}
export default ArticleDetail;

I'm not seeing the component rendered at all though. What is the Route I need to get it to load the component so I can then strip out the parameter value?

1 Answer 1

3

I wouldn't match query parameters already in the path of your Route. Query parameters are just key/value pairs and could appear in random order. Matching them in the route would already make assumptions about their order.

<Route path="/article" component={ArticleDetail}/>

In ArticleDetail you can get the query parameter like that:

const id = URLSearchParams(this.props.location).search.get('id');

But usually you don't use query parameters anyway when dealing with ids that identify an entity. You would rather have a path like: /article/12345 where 12345 is the article id:

<Route path="/article/:id" component={ArticleDetail}/>

Then you could access it simply like that:

const {id} = this.props.match.params;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.