Skip to content

Commit 2587b3a

Browse files
tduyngtduyng
authored
Merge pull request #3 from tienduy-nguyen/develop
Add React Helmet for SEO
2 parents 444b496 + 625bef7 commit 2587b3a

File tree

4 files changed

+82
-44
lines changed

4 files changed

+82
-44
lines changed

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
"json-server": "^0.16.3",
2424
"react": "^17.0.1",
2525
"react-dom": "^17.0.1",
26+
"react-helmet-async": "^1.0.7",
2627
"react-redux": "^7.2.2",
2728
"react-router-dom": "^5.2.0",
2829
"react-scripts": "4.0.1",
@@ -67,4 +68,4 @@
6768
"last 1 safari version"
6869
]
6970
}
70-
}
71+
}

‎public/index.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,10 @@
2222
work correctly both with client-side routing and a non-root public URL.
2323
Learn how to configure a non-root public URL by running `npm run build`.
2424
-->
25-
<meta property="og:title" content="React Boilerplate TypeScript" />
25+
<meta property="og:title" content="React TypeScript Boilerplate" />
2626
<meta property="og:description" content="" />
2727

28-
<title>React App</title>
28+
<title>React TS Boilerplate</title>
2929
<meta name="description" content="" />
3030
</head>
3131

‎src/routes/index.tsx

+55-41
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { Loading } from 'src/components/Loading';
55
import { Route, Switch } from 'react-router-dom';
66
import { PrivateRoute } from './PrivateRoute';
77
import { MainLayout } from 'src/pages/layouts/MainLayout';
8+
import { Helmet, HelmetProvider } from 'react-helmet-async';
89

910
// ---> Static pages
1011
const HomePage = lazy(() => import('src/pages/HomePages/HomePage'));
@@ -37,53 +38,66 @@ const ProductEditPage = lazy(
3738
// ---> Error pages
3839
const NotFoundPage = lazy(() => import('src/pages/ErrorPages/404Pages'));
3940

41+
const helmetContext = {};
42+
4043
export const Routes = () => {
4144
return (
4245
<BrowserRouter>
43-
<MainLayout>
44-
<Suspense fallback={<Loading />}>
45-
<Switch>
46-
{/* Static pages routes */}
47-
<Route exact path={PATH.HOME} component={HomePage} />
48-
<Route exact path={PATH.ABOUT} component={AboutPage} />
49-
<Route exact path={PATH.DEMO1} component={Demo1Page} />
50-
<Route exact path={PATH.DEMO2} component={Demo2Page} />
51-
<Route exact path={PATH.FEATURE1} component={Feature1Page} />
52-
<Route exact path={PATH.FEATURE2} component={Feature2Page} />
53-
<Route exact path={PATH.CONTACT} component={ContactPage} />
46+
<HelmetProvider context={helmetContext}>
47+
<Helmet>
48+
<meta charSet="utf-8" />
49+
<title>React TS Boilerplate</title>
50+
<link
51+
rel="canonical"
52+
href="https://reactts-boilerplate.netlify.app/"
53+
/>
54+
</Helmet>
55+
56+
<MainLayout>
57+
<Suspense fallback={<Loading />}>
58+
<Switch>
59+
{/* Static pages routes */}
60+
<Route exact path={PATH.HOME} component={HomePage} />
61+
<Route exact path={PATH.ABOUT} component={AboutPage} />
62+
<Route exact path={PATH.DEMO1} component={Demo1Page} />
63+
<Route exact path={PATH.DEMO2} component={Demo2Page} />
64+
<Route exact path={PATH.FEATURE1} component={Feature1Page} />
65+
<Route exact path={PATH.FEATURE2} component={Feature2Page} />
66+
<Route exact path={PATH.CONTACT} component={ContactPage} />
5467

55-
{/* Auth routes */}
56-
<Route exact path={PATH.LOGIN} component={LoginPage} />
57-
<Route exact path={PATH.REGISTER} component={RegisterPage} />
58-
<PrivateRoute exact path={PATH.PROFILE} component={ProfilePage} />
68+
{/* Auth routes */}
69+
<Route exact path={PATH.LOGIN} component={LoginPage} />
70+
<Route exact path={PATH.REGISTER} component={RegisterPage} />
71+
<PrivateRoute exact path={PATH.PROFILE} component={ProfilePage} />
5972

60-
{/* Products routes */}
61-
<PrivateRoute
62-
exact
63-
path={PATH.PRODUCTS}
64-
component={ProductListPage}
65-
/>
66-
<PrivateRoute
67-
exact
68-
path={PATH.PRODUCT_NEW}
69-
component={ProductNewPage}
70-
/>
71-
<PrivateRoute
72-
exact
73-
path={PATH.PRODUCT_SHOW}
74-
component={ProductItemPage}
75-
/>
76-
<PrivateRoute
77-
exact
78-
path={PATH.PRODUCT_EDIT}
79-
component={ProductEditPage}
80-
/>
73+
{/* Products routes */}
74+
<PrivateRoute
75+
exact
76+
path={PATH.PRODUCTS}
77+
component={ProductListPage}
78+
/>
79+
<PrivateRoute
80+
exact
81+
path={PATH.PRODUCT_NEW}
82+
component={ProductNewPage}
83+
/>
84+
<PrivateRoute
85+
exact
86+
path={PATH.PRODUCT_SHOW}
87+
component={ProductItemPage}
88+
/>
89+
<PrivateRoute
90+
exact
91+
path={PATH.PRODUCT_EDIT}
92+
component={ProductEditPage}
93+
/>
8194

82-
{/* Error routes */}
83-
<Route component={NotFoundPage} />
84-
</Switch>
85-
</Suspense>
86-
</MainLayout>
95+
{/* Error routes */}
96+
<Route component={NotFoundPage} />
97+
</Switch>
98+
</Suspense>
99+
</MainLayout>
100+
</HelmetProvider>
87101
</BrowserRouter>
88102
);
89103
};

‎yarn.lock

+23
Original file line numberDiff line numberDiff line change
@@ -6405,6 +6405,13 @@ internal-slot@^1.0.2:
64056405
has "^1.0.3"
64066406
side-channel "^1.0.2"
64076407

6408+
invariant@^2.2.4:
6409+
version "2.2.4"
6410+
resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
6411+
integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
6412+
dependencies:
6413+
loose-envify "^1.0.0"
6414+
64086415
ip-regex@^2.1.0:
64096416
version "2.1.0"
64106417
resolved "https://registry.yarnpkg.com/ip-regex/-/ip-regex-2.1.0.tgz#fa78bf5d2e6913c911ce9f819ee5146bb6d844e9"
@@ -10427,6 +10434,22 @@ react-error-overlay@^6.0.8:
1042710434
resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.8.tgz#474ed11d04fc6bda3af643447d85e9127ed6b5de"
1042810435
integrity sha512-HvPuUQnLp5H7TouGq3kzBeioJmXms1wHy9EGjz2OURWBp4qZO6AfGEcnxts1D/CbwPLRAgTMPCEgYhA3sEM4vw==
1042910436

10437+
react-fast-compare@^3.2.0:
10438+
version "3.2.0"
10439+
resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
10440+
integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
10441+
10442+
react-helmet-async@^1.0.7:
10443+
version "1.0.7"
10444+
resolved "https://registry.yarnpkg.com/react-helmet-async/-/react-helmet-async-1.0.7.tgz#b988fbc3abdc4b704982bb74b9cb4a08fcf062c1"
10445+
integrity sha512-By90p5uxAriGukbyejq2poK41DwTxpNWOpOjN8mIyX/BKrCd3+sXZ5pHUZXjHyjR5OYS7PGsOD9dbM61YxfFmA==
10446+
dependencies:
10447+
"@babel/runtime" "^7.11.2"
10448+
invariant "^2.2.4"
10449+
prop-types "^15.7.2"
10450+
react-fast-compare "^3.2.0"
10451+
shallowequal "^1.1.0"
10452+
1043010453
react-is@^16.12.0, react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
1043110454
version "16.13.1"
1043210455
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"

0 commit comments

Comments
 (0)