React Router

[DomVinyard]

We need to implement React Router in our React application to allow for navigation between different pages. We want to create two initial routes:

• "/" to load the homepage.
• "/:topic" to load a topic page.

Tasks:

• Install react-router-dom using NPM or Yarn.
• Create a new file AppRouter.js for the router component.
• Implement the router component in AppRouter.js. The component should define two initial routes: "/" and "/:topic".
• Create a new component for the Homepage component . For now this should be really simple, just enough that we can test that it works

const Homepage = () => {
  return (<div>
    <h1>Homepage</h1>
    <a href="/javascript">Javascript</a>
  </div>)
}

• Create a Topic page, this should be similar to your existing App.js, however rather than fetching data from http://localhost:4000/topics we should instead fetch data from http://localhost:4000/topic/${topic_name}. The topic name should be fetched from the url.
• For now we don't need to implement any design for the topic page, just printing out the stringified json will suffice

Acceptance Criteria:

• The React Router component should be implemented in AppRouter.js.
• The router component should define two initial routes: "/" and "/:topic".
• The homepage and topic page components should have been created
• The homepage component should be displayed when the "/" route is accessed.
• The topic page component should be displayed when the "/:topic" route is accessed.
• The router should handle navigation between the two initial routes.
• There should be tests

[DomVinyard]

This is a useful resource for learning about React Router: https://www.youtube.com/watch?v=Ul3y1LXxzdU

[swdilip]

Should clicking the <a> tag on the homepage take the user to the Topic Page? and is the Topic Card to be rendered within topic page?

[mdapim]

Whats the purpose of the colon before topic please e.g. "/:topic"

[bp289]

After implementing the AppRouter.js, should we delete the App.js ? we have chosen to have the AppRouter file in the index.js file where the App.js would usually go:

import AppRouter from "./AppRouter";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <AppRouter />
  </React.StrictMode>
);

reportWebVitals();

[Ademsk1]

@bp289 We've deleted it, but I'm sure it's no harm @mdapim This allows us to use the useParams() feature of react-router-dom. Remember in Flask we were able to use @app.route('/home/<id>') ? Where ID was a variable we could set? Well, the colon acts just like the <>. We can interact with it using useParams() e.g. const {id} = useParams() inside the element

[Ademsk1]

Will there be actually 3 different routes, i.e.

"/" : HomePage
"/topic/" : Main topics page
"topic/:topic" : Particular Topic of Interest Page

I'd argue it should be like this to allow navigation between the home and topics page to be more streamlined for the user. If I was on a particular topic, then navigated to home, and then back to topic, I wouldn't want to see the last topic I saw using the navigation, but instead perhaps a list of recently added topics.

[mdapim]

@Ademsk1 I thought that as well so didn't know whether to get rid of initial app.js file as that could be the topics page before particular topic of interest

[DomVinyard]

Will there be actually 3 different routes, i.e.

It would be a good idea for a website with multiple features, but in this case let's keep the URL super simple like:

https://url.com/javascript https://url.com/react

[mdapim]

@DomVinyard When using useParams() should we be taking into account invalid requests such as below yet, or would that be a separate ticket please?