18. Using Different Routes

18.1. Routing

In this chapter we will add routing so that we can navigate to a specific FAQ item. First we will install react-router-dom:

yarn add react-router-dom

Next we will define the routes we want to use. We will use BrowserRouter to define our routes. We will have a view at the root, and a view at /faq/1, where 1 is the index of the FAQ item. Our new App.js will look like this:

import { Provider } from "react-redux";
import { createStore, applyMiddleware } from "redux";
import { BrowserRouter, Route } from "react-router-dom";

import rootReducer from "./reducers";
import Faq from "./components/Faq";
import FaqItemView from "./components/FaqItemView";
import api from "./middleware/api";

import "./App.css";

const store = createStore(rootReducer, applyMiddleware(api));

const App = () => {
  return (
    <Provider store={store}>
      <BrowserRouter>
        <div>
          <Route exact path="/" component={Faq} />
          <Route path="/faq/:index" component={FaqItemView} />
        </div>
      </BrowserRouter>
    </Provider>
  );
};

export default App;

Differences

--- a/src/App.js
+++ b/src/App.js
@@ -1,8 +1,10 @@
 import { Provider } from "react-redux";
 import { createStore, applyMiddleware } from "redux";
+import { BrowserRouter, Route } from "react-router-dom";

 import rootReducer from "./reducers";
 import Faq from "./components/Faq";
+import FaqItemView from "./components/FaqItemView";
 import api from "./middleware/api";

 import "./App.css";
@@ -12,7 +14,12 @@ const store = createStore(rootReducer, applyMiddleware(api));
 const App = () => {
   return (
     <Provider store={store}>
-      <Faq />
+      <BrowserRouter>
+        <div>
+          <Route exact path="/" component={Faq} />
+          <Route path="/faq/:index" component={FaqItemView} />
+        </div>
+      </BrowserRouter>
     </Provider>
   );
 };

18.2. Writing The View

Now we will create the FaqItemView component at components/FaqItemView.js. This will render the full FAQ item. The code will look something like this:

import { useEffect } from "react";
import { getFaqItems } from "../actions";
import { useSelector, useDispatch } from "react-redux";
import { useParams } from "react-router-dom";

const FaqItemView = () => {
  const dispatch = useDispatch();
  const faqItem = "Todo";

  useEffect(() => {
    dispatch(getFaqItems());
  }, [dispatch]);

  return (
    <div>
      <h2 className="question">{faqItem.question}</h2>
      <p>{faqItem.answer}</p>
    </div>
  );
};

export default FaqItemView;

18.3. Exercise

React Router has a hook called useParams which returns an object of key/value pairs of URL parameters. The return object contains all the params of the match route, including our index params. Remove the Todo string, and write a function for the useSelector hook to fetch the correct data from the store.

Solution

  const { index } = useParams();
  const dispatch = useDispatch();
  const faqItem = useSelector((state) =>
    state.faq.length ? state.faq[index] : {}
  );

To test your view navigate to http://localhost:3000/faq/0.