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