CODEWITHSUNDEEP
javascriptreactjsreact-routerendpoint
mfaccord
mfaccord

Reputation: 225

React Router Link not updating endpoint when clicked

I'm trying to setup a basic React app using Router. However, when you click on a Link tag, it will render the correct component of EpisodeDisplay but, the endpoint will not update. I've tried changing the Route paths as well as updating the Link endpoints. When I manually type in the endpoint though (localhost:3000/season1), the MainPage will render. I'm at a loss on how to correct this issue.

Any help would be greatly appreciated!

App

import React from "react";
import MainPage from "../MainPage/MainPage";
import "./App.scss";
import { Route, Switch } from "react-router-dom";
import EpisodeDisplay from "../EpisodeDisplay/EpisodeDisplay";

const App = () => {
  return (
    <>
      <Switch>
        <Route exact path="/" render={() => <MainPage />} />
        <Route exact path="/:season" render={() => <EpisodeDisplay />} />
      </Switch>
    </>
  );
};

export default App;

MainPage

import React, { useEffect, useState } from "react";
import Seasons from "../Seasons/Seasons";
import { getSeasons } from "../../APIcalls";
import { Link } from "react-router-dom";

import "./MainPage.scss";

const MainPage = () => {
  return (
    <div className="div-bg">
      <p>
        ANIMEtrics
        <br />
        For My Hero Academia Fanatics
      </p>
      <div className="season-div">
        <Link className="link" to={"/season1"}>
          <article className="season-card" data-value="season-1">
            Season 1
          </article>
        </Link>
        <Link className="link" to={"/season2"}>
          <article className="season-card" data-value="season-2">
            Season 2
          </article>
        </Link>
        <Link className="link" to={"/season3"}>
          <article className="season-card" data-value="season-3">
            Season 3
          </article>
        </Link>
        <Link className="link" to={"/season4"}>
          <article className="season-card" data-value="season-4">
            Season 4
          </article>
        </Link>
        <Link className="link" to={"/season5"}>
          <article className="season-card" data-value="season-5">
            Season 5
          </article>
        </Link>
        <Link className="link" to={"/movies"}>
          <article className="season-card" data-value="movies">
            Movies
          </article>
        </Link>
      </div>
    </div>
  );
};

export default MainPage;

Episode Display

import React from 'react';

const EpisodeDisplay = () => {

    return (
        <h1>Episode Display</h1>
    )
}

export default EpisodeDisplay;

Upvotes: 0

Views: 581

Answers (1)

hafiz ali
hafiz ali

Reputation: 1446

Can you try wrapping content inside App.js with BrowserRouter as below

import React from "react";
import MainPage from "../MainPage/MainPage";
import "./App.scss";
import { Route, Switch, BrowserRouter as Router } from "react-router-dom";
import EpisodeDisplay from "../EpisodeDisplay/EpisodeDisplay";

const App = () => {
  return (
    <>
      <Router>
        <Switch>
          <Route exact path="/" render={() => <MainPage />} />
          <Route exact path="/:season" render={() => <EpisodeDisplay />} />
        </Switch>
      </Router>
    </>
  );
};

export default App;

Upvotes: 1

Related Questions