CODEWITHSUNDEEP
reactjsreact-router
Anton Gurevich
Anton Gurevich

Reputation: 50

Why do my Link To links not work in React-Router?

Trying to create an about page for a website im working on, I found this solution on Stack but it does not work for me. I was using an outdated tutorial for my original code, this is my current code:

About.js:

import React from "react";
import { Link, Route, useMatch } from "react-router-dom";
import SinglePage from "./SinglePage";

const About = () => {
    //const match = useMatch('/');
    return (
    <div className="about__content">
      <ul className="about__list">
        <li>
          <Link to={'about-app'}>About App</Link>
        </li>
        <li>
          <Link to={'about-author'}>About Author</Link>
        </li>
      </ul>
      <Route path={':slug'}>
        <SinglePage />
      </Route>
    </div>
  );
};

export default About;

Index.js where I am rendering the component:

import React from "react";
import ReactDOM from "react-dom";
import TodoContainer from "./functionBased/components/TodoContainer"; // Component file
import "./functionBased/App.css"; // Style sheet
import { HashRouter as Router, Routes, Route } from "react-router-dom"; // Router file
import About from "./functionBased/pages/About";
import NotMatch from "./functionBased/pages/NotMatch";

ReactDOM.render(
  <React.StrictMode>
    <Router>
      <Routes>
        <Route exact path="/" element={<TodoContainer />} />
        <Route path="/about/*" element={<About />} />
        <Route path="*" element={<NotMatch />} />
      </Routes>
    </Router>
  </React.StrictMode>,
  document.getElementById("root")
);

Upvotes: 1

Views: 138

Answers (2)

Drew Reese
Drew Reese

Reputation: 202721

Issues

  1. The About component is directly rendering a Route component. The Route component can only be rendered by a Routes component or another Route component as a nested route.
  2. The react-router-dom@6 Route components render their content on the element prop.

Solution

  • Import the Routes component and wrap the descendent Route component rendered by `About.
  • Render SinglePage on the route's element prop.

Example:

import React from "react";
import { Link, Routes, Route } from "react-router-dom";
import SinglePage from "./SinglePage";

const About = () => {
  return (
    <div className="about__content">
      <ul className="about__list">
        <li>
          <Link to="about-app">About App</Link>
        </li>
        <li>
          <Link to="about-author">About Author</Link>
        </li>
      </ul>
      <Routes>
        <Route path=":slug" element={<SinglePage />} />
      </Routes>
    </div>
  );
};

export default About;

Edit why-do-my-link-to-links-not-work-in-react-router

Alternative

You could alternatively move the SinglePage route out to the main router as a nested route (instead of where it is as a descendent route).

Example:

import React from "react";
import { Link, Outlet } from "react-router-dom";
import SinglePage from "./SinglePage";

const About = () => {
  return (
    <div className="about__content">
      <ul className="about__list">
        <li>
          <Link to="about-app">About App</Link>
        </li>
        <li>
          <Link to="about-author">About Author</Link>
        </li>
      </ul>
      <Outlet />
    </div>
  );
};

export default About;

...

<Router>
  <Routes>
    <Route path="/" element={<TodoContainer />} />
    <Route path="/about" element={<About />}>
      <Route path=":slug" element={<SinglePage />} />
    </Route>
    <Route path="*" element={<NotMatch />} />
  </Routes>
</Router>

Edit why-do-my-link-to-links-not-work-in-react-router (forked)

Upvotes: 2

Awais Ayub
Awais Ayub

Reputation: 429

You are defining the routes with /about/* and accessing them with about-something which does not exist at all, add \about\author in to for Link.

Upvotes: 0

Related Questions