My react-router doesn't work while using axios to fetch API.

I am trying to fetch Newsapi. Now I display the news on the screen and I want to click the image and redirect to that detailed news page. I add react-router to it. But it does not work. Here is the code, https://github.com/xnslx/React-router-practice-fetch-newsapi Thank you in advance!

Comments

[frgarciames]

You need to remove in App.js:

        <div className="App">
          <News />
        </div>

You are declaring News route so you do not need to put the News component there.
So, what you are looking in your app is News component because It is there and not because It is in your router.

[xnslx]

Hey, THANK YOU SO MUCH! Now the page can be redirected to that fullnews page. But I can only pass router related props to this component while cannot fetch the news related detail. Thank you for your patience!

[frgarciames]

I do not understand you, in your code, you are trying to fetch the whole article but newsapi response has "url" param which is to redirect to that whole specific article.
I saw that you are using functional components, I suggest you to use hooks with react-router-dom like useHistory, useParams, etc.
Tell me if you need more help.

[xnslx]

My goal is very simple, fetch the news and display them on the screen. When you click the image of each piece of news, the page will redirect you to that detailed news page.

[frgarciames]

But you need to redirect to the source specific article. Newsapi's response has url attribute which is to redirect to that specific article.

[xnslx]

If I don’t want to redirect to the external website, can I use react hooks to store the collection of articles that I fetched for further usage. Or is there any other way to store the data that I fetched? Thank you so much!

[frgarciames]

You already have the data stored. When you fetch data you are using useState hook to store the data with setNews.

[xnslx]

Thank you for your advice and patience! I will have a try later! Thank you!