From 8e13f18a03c2db5429e57a6c1a44b73c7c7b4e3f Mon Sep 17 00:00:00 2001
From: Jason Zhu <jasonzhuyq@outlook.com>
Date: Tue, 29 Mar 2022 16:33:58 +1100
Subject: [PATCH] Chap05 -> Using route parameters -> Adding the question page
 route (Finished)

---
 QandA/frontend/src/Question.tsx     | 15 ++++++++++++---
 QandA/frontend/src/QuestionPage.tsx |  7 ++++++-
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/QandA/frontend/src/Question.tsx b/QandA/frontend/src/Question.tsx
index 29f835b..330780e 100644
--- a/QandA/frontend/src/Question.tsx
+++ b/QandA/frontend/src/Question.tsx
@@ -1,8 +1,9 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
-import { gray2, gray3 } from './Styles';
-
+import { Link } from 'react-router-dom';
 import React from 'react';
+
+import { gray2, gray3 } from './Styles';
 import { QuestionData } from './QuestionsData';
 
 interface Props {
@@ -18,7 +19,15 @@ export const Question = ({ data, showContent }: Props) => (
         font-size: 19px;
       `}
     >
-      {data.title}
+      <Link
+        css={css`
+          text-decoration: none;
+          color: ${gray2};
+        `}
+        to={`/questions/${data.questionId}`}
+      >
+        {data.title}
+      </Link>
     </div>
     {showContent && (
       <div
diff --git a/QandA/frontend/src/QuestionPage.tsx b/QandA/frontend/src/QuestionPage.tsx
index e51fe6a..38c17dc 100644
--- a/QandA/frontend/src/QuestionPage.tsx
+++ b/QandA/frontend/src/QuestionPage.tsx
@@ -1,4 +1,9 @@
 import React from 'react';
+import { useParams } from 'react-router-dom';
+
 import { Page } from './Page';
 
-export const QuestionPage = () => <Page>Question Page</Page>;
+export const QuestionPage = () => {
+  const { questionId } = useParams();
+  return <Page>Question Page {questionId}</Page>;
+};