Skip to main content

News Page

In the previous section we created a list of news. Now we want to be able to see the full news by clicking on the title in the list.

1. Set up router and news page#

We use React Router to set up the routing. We need move the news list to its own component, then our App.tsx will handle the routing. In the NewsList.tsx we add a link to news page. Then we create a new component NewsPage.tsx which uses the usePost hook to retrieve a post and show it.

import React from 'react';
import {Routes, Route, Link} from "react-router-dom";
import NewsList from "./components/NewsList";
import {NewsPage} from "./components/NewsPage";
function App() {
return (
<Routes>
<Route path="/" element={<NewsList/>}/>
<Route path="/:postId" element={<NewsPage />} />
</Routes>
);
}
export default App;