chore: add react-router

This commit is contained in:
Steven 2022-09-16 22:48:41 +08:00
parent 8d694f7732
commit 660908e436
5 changed files with 54 additions and 7 deletions

View File

@ -17,7 +17,8 @@
"react": "^18.1.0", "react": "^18.1.0",
"react-dom": "^18.1.0", "react-dom": "^18.1.0",
"react-feather": "^2.0.10", "react-feather": "^2.0.10",
"react-redux": "^8.0.1" "react-redux": "^8.0.1",
"react-router-dom": "^6.4.0"
}, },
"devDependencies": { "devDependencies": {
"@types/lodash-es": "^4.17.5", "@types/lodash-es": "^4.17.5",

13
web/src/hooks/useQuery.ts Normal file
View File

@ -0,0 +1,13 @@
// A custom hook that builds on useLocation to parse
import React from "react";
import { useLocation } from "react-router-dom";
// the query string for you.
const useQuery = () => {
const { search } = useLocation();
return React.useMemo(() => new URLSearchParams(search), [search]);
};
export default useQuery;

View File

@ -1,5 +1,6 @@
import { createRoot } from "react-dom/client"; import { createRoot } from "react-dom/client";
import { Provider } from "react-redux"; import { Provider } from "react-redux";
import { BrowserRouter } from "react-router-dom";
import I18nProvider from "./labs/i18n/I18nProvider"; import I18nProvider from "./labs/i18n/I18nProvider";
import store from "./store"; import store from "./store";
import App from "./App"; import App from "./App";
@ -10,9 +11,11 @@ import "./css/index.css";
const container = document.getElementById("root"); const container = document.getElementById("root");
const root = createRoot(container as HTMLElement); const root = createRoot(container as HTMLElement);
root.render( root.render(
<I18nProvider> <BrowserRouter>
<Provider store={store}> <I18nProvider>
<App /> <Provider store={store}>
</Provider> <App />
</I18nProvider> </Provider>
</I18nProvider>
</BrowserRouter>
); );

View File

@ -3,6 +3,7 @@ import { useEffect, useState } from "react";
import { locationService, memoService, userService } from "../services"; import { locationService, memoService, userService } from "../services";
import { useAppSelector } from "../store"; import { useAppSelector } from "../store";
import useI18n from "../hooks/useI18n"; import useI18n from "../hooks/useI18n";
import useQuery from "../hooks/useQuery";
import useLoading from "../hooks/useLoading"; import useLoading from "../hooks/useLoading";
import Only from "../components/common/OnlyWhen"; import Only from "../components/common/OnlyWhen";
import MemoContent from "../components/MemoContent"; import MemoContent from "../components/MemoContent";
@ -15,6 +16,7 @@ interface State {
const Explore = () => { const Explore = () => {
const { t, locale } = useI18n(); const { t, locale } = useI18n();
const query = useQuery();
const user = useAppSelector((state) => state.user.user); const user = useAppSelector((state) => state.user.user);
const location = useAppSelector((state) => state.location); const location = useAppSelector((state) => state.location);
const [state, setState] = useState<State>({ const [state, setState] = useState<State>({
@ -34,9 +36,18 @@ const Explore = () => {
} }
memoService.fetchAllMemos().then((memos) => { memoService.fetchAllMemos().then((memos) => {
let filteredMemos = memos;
const memoId = Number(query.get("memoId"));
if (memoId && !isNaN(memoId)) {
filteredMemos = filteredMemos.filter((memo) => {
return memo.id === memoId;
});
}
setState({ setState({
...state, ...state,
memos, memos: filteredMemos,
}); });
}); });
loadingState.setFinish(); loadingState.setFinish();

View File

@ -341,6 +341,11 @@
redux-thunk "^2.4.1" redux-thunk "^2.4.1"
reselect "^4.1.5" reselect "^4.1.5"
"@remix-run/router@1.0.0":
version "1.0.0"
resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.0.0.tgz#a2189335a5f6428aa904ccc291988567018b6e01"
integrity sha512-SCR1cxRSMNKjaVYptCzBApPDqGwa3FGdjVHc+rOToocNPHQdIYLZBfv/3f+KvYuXDkUGVIW9IAzmPNZDRL1I4A==
"@types/hoist-non-react-statics@^3.3.1": "@types/hoist-non-react-statics@^3.3.1":
version "3.3.1" version "3.3.1"
resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f" resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
@ -2113,6 +2118,20 @@ react-refresh@^0.14.0:
resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e" resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e"
integrity sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ== integrity sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==
react-router-dom@^6.4.0:
version "6.4.0"
resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.4.0.tgz#a7d7c394c9e730b045cdd4f5d6c2d1ccb9e26947"
integrity sha512-4Aw1xmXKeleYYQ3x0Lcl2undHR6yMjXZjd9DKZd53SGOYqirrUThyUb0wwAX5VZAyvSuzjNJmZlJ3rR9+/vzqg==
dependencies:
react-router "6.4.0"
react-router@6.4.0:
version "6.4.0"
resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.4.0.tgz#68449c23dc893fc7a57db068c19987be1de72edb"
integrity sha512-B+5bEXFlgR1XUdHYR6P94g299SjrfCBMmEDJNcFbpAyRH1j1748yt9NdDhW3++nw1lk3zQJ6aOO66zUx3KlTZg==
dependencies:
"@remix-run/router" "1.0.0"
react@^18.1.0: react@^18.1.0:
version "18.2.0" version "18.2.0"
resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5" resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"