React Router lesson - Articles not showing... only "No article with that title..."

Hello everyone!

I have gone through the React Router lesson in the pro frontend career path and I have hit a brick wall. About two or three lessons in my articles disappeared and all I see is “No article found with that title…”. I finished the lesson with the walk-thru and I’ve gone over my code a number of times, and I made sure I was using react router v5, but I can’t seem to find where the issue is.

Here’s my Article.js where I thought the issue was… :

import React from 'react'; import { useSelector } from 'react-redux'; import { selectArticles } from '../features/articles/articlesSlice'; import { useParams, Link } from 'react-router-dom'; import ReactMarkdown from 'react-markdown'; export default function Article () { const articles = useSelector(selectArticles) const { title } = useParams() const article = articles[title] return article ? ( <div className='article-container'> <h1 className='article-title'>{article.title}</h1> <p>By <Link to={`/authors/${article.author}`}> {article.author} </Link></p> <ReactMarkdown> {article.body} </ReactMarkdown> </div> ) : <p> No article found with that title... </p> }

Here’s the Articles.js:

import React from "react"; import { useSelector } from "react-redux"; import { selectArticles, filterArticles } from "../features/articles/articlesSlice"; import Search from "./Search"; import { Link, useLocation } from "react-router-dom"; export default function Articles () { const articles = useSelector(selectArticles) // grab the search value from useLocation() const { search } = useLocation(); // get the queryParams from new URLSearchParams() const queryParams = new URLSearchParams(search); const title = queryParams.get('title'); const filteredArticles = title ? filterArticles(title, articles) : Object.values(articles) return ( <main> <h1>Articles</h1> <ul> { filteredArticles.map(article => { return ( <li key={article.slug}> <Link to={`/articles/${article.slug}`}> {article.title} </Link> </li> ) }) } </ul> <Search /> </main> ) }

And finally my App.js file:

import React from "react"; import Header from "../components/Header"; import Footer from "../components/Footer"; import About from "../components/About"; import SignUp from "../components/SignUp"; import Articles from "../components/Articles"; import Article from "../components/Article"; import Categories from "../components/Categories"; import Author from "../components/Author"; import Profile from "../components/Profile"; import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import "./App.css"; function App() { return ( <Router> <Header /> <main> <Switch> <Route> <Article path='/articles/:title' /> </Route> <Route> <Author path='/authors/:name' /> </Route> <Route path='/about'> <About /> </Route> <Route path='/sign-up'> <SignUp /> </Route> <Route path='/articles'> <Articles /> </Route> <Route path='/categories'> <Categories /> </Route> <Route path='/profile'> <Profile /> </Route> </Switch> </main> <Footer /> </Router> ); } export default App;

Thanks for any thoughts you might have!

Mike