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

Question

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") );

Drew Reese · Accepted Answer · 2022-07-05 16:49:00Z

Issues

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.
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;

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>

Awais Ayub · Accepted Answer · 2022-07-04 22:08:07Z

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.

Collectives™ on Stack Overflow

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

2 Answers 2

Issues

Solution

Alternative

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Issues

Solution

Alternative

Comments

Comments

Related