CODEWITHSUNDEEP
reactjsreact-helmet
yongchanson
yongchanson

Reputation: 1

I applied favicon to react using helmet, but not all of them are applied

  1. Circumstances that apply

    route = "/", "/login"

  2. Situations that do not apply(If ":" exists)

    route = "/:movieId", ":castId"

//App.js
 return (
    <ThemeProvider theme={theme === false ? lightTheme : darkTheme}>
      <Helmet>
        <link href={Logo} />
      </Helmet>
      <GlobalStyles />
      <Wrapper>
        <Suspense fallback={<div>Loading...</div>}>
          {/* <Header> */}
          <NavBar />

          <Switch>
            <Route exact path="/" component={Auth(LandingPage, null)} />
            <Route exact path="/login" component={Auth(LoginPage, false)} />
            <Route
              exact
              path="/register"
              component={Auth(RegisterPage, false)}
            />
            <Route
              exact
              path="/movie/:movieId"
              component={Auth(MovieDetail, null)}
            />
            <Route
              exact
              path="/cast/:castId"
              component={Auth(CastPage, null)}
            />
            <Route
              exact
              path="/favorite"
              component={Auth(FavoritePage, true)}
            />
            <Route exact path="/loading" component={Auth(LoadingPage, null)} />
          </Switch>
          <Footer />
        </Suspense>
      </Wrapper>
    </ThemeProvider>
  );

Titles work well. Could you please tell me the cause?

Upvotes: 0

Views: 670

Answers (2)

pgm-jefdenie
pgm-jefdenie

Reputation: 61

Putting the helmet component as high as possible helps. I changed this to my personal files and it did the trick:

index.html in public folder:

<!DOCTYPE html>
<html lang="nl">
  <head>
    <!-- Metadata -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#FF1F4F" />
    <meta
    name="PGM Platform"
    content="Graduaat programmeren"
    />
    <!-- Icons -->
    <link rel="icon" href="./favicon-16x16.png" />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/apple-touch-icon.png" />

    <!-- Manifest -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!-- Title-->
    <title>PGM Gent: Graduaat Programmeren</title>
  </head>
  <body>

    <script src="index.bundle.js"></script>
    <div id="root"></div>
  </body>
</html>

App.js:

// Imports etc
function App() {
  return (
      <div className='App'>
        <Helmet>
          <html lang='nl' />
          <title>PGM Platform</title>
          <meta name='viewport' content='width=device-width, initial-scale=1.0'></meta>
          <meta name='description' content='PGM Platform website voor Arteveldehogeschool' />
          <meta name='theme-color' content='#ff336d' />
          <meta
            name='keywords'
            content='Programmeren, Arteveldehogeschool, graduaat programmeren, programmeren studeren'
          />
        </Helmet>
        <Routes>
            <Route path={HOME} element={<HomePage />} />
            // Other routes to my other pages were here, but icon was not showing because my Helmet was placed elsewhere. Now that i place it at the top of my App it worked.

note: it might be better to put your helmet into your index.js instead of App.js to keep your App as clean as possible.

Upvotes: -1

Exifers
Exifers

Reputation: 2822

Make sure the Helmet component is mounted for all pages by putting it high enough in the component tree.

Upvotes: 1

Related Questions