diff --git a/README.md b/README.md
index 6ece4bf..0197832 100644
--- a/README.md
+++ b/README.md
@@ -116,7 +116,7 @@ You can test the website locally using `yarn start`.
Deployment
-You can the website to GitHub pages using `npm run deploy`.
+You can deploy the website to GitHub pages using `npm run deploy`.
Contributing
diff --git a/package.json b/package.json
index 2992e43..231aeb6 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
"proptypes": "^1.1.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
- "react-router-dom": "^6.2.1",
+ "react-router-dom": "^6.4.5",
"react-scripts": "5.0.0",
"react-transition-group": "^4.4.2"
},
diff --git a/src/components/UserMessage.jsx b/src/components/UserMessage.jsx
index 57032cc..9559023 100644
--- a/src/components/UserMessage.jsx
+++ b/src/components/UserMessage.jsx
@@ -1,25 +1,31 @@
import React, { useState, useEffect } from 'react';
+import { Link, useSearchParams } from 'react-router-dom';
import user from '../img/user-img.png';
import { UserResponseList } from './UserResponseList';
import urlToJSON from './utils/urlToJSON';
-import { Link } from 'react-router-dom';
import BackIcon from '../img/back.png';
+import createPathIdQuery from './utils/createPathIdQuery';
-export default function UserMessage({ setjsonPathMap, jsonPathMap, pathId }) {
+export default function UserMessage({ setjsonPathMap, jsonPathMap }) {
const [userName, setuserName] = useState('Test-User >');
+
+ const [searchParams] = useSearchParams();
+ const pathId = searchParams.get('pathId');
+
useEffect(() => {
setjsonPathMap(urlToJSON(pathId));
- urlToJSON(pathId);
setuserName('You');
}, [pathId, setjsonPathMap]);
return (
{/* Back button link */}
- {/* when pathId===undefined (i.e. First Message) --> Don't render back buttom. */}
- {pathId !== undefined ? (
+ {/* when pathId is falsy (i.e. First Message) --> Don't render back buttom. */}
+ {pathId ? (
diff --git a/src/components/UserMessageSection.jsx b/src/components/UserMessageSection.jsx
index c012c2d..1ae59d2 100644
--- a/src/components/UserMessageSection.jsx
+++ b/src/components/UserMessageSection.jsx
@@ -1,32 +1,34 @@
import React from 'react';
import PathMap from './PathMap';
-import { Routes, Route, HashRouter as Router } from 'react-router-dom';
+import {
+ Routes,
+ Route,
+ BrowserRouter as Router,
+ createBrowserRouter,
+ RouterProvider,
+ createRoutesFromElements,
+} from 'react-router-dom';
import UserMessage from './UserMessage';
export function UserMessageSection({ setjsonPathMap, jsonPathMap }) {
- return (
-
- (
-
- (
-