0

I'm building a blog using React and Sanity and in my Routes, the NotFound page works perfectly with static URLs but I found that it doesn't actually redirects for links with bad slug in URL:

This is my App.js routes

<BrowserRouter>
  <Routes>
    <Route element={<NavRoute element={<Home/>}/>} path="/"/>
    <Route element={<NavRoute element={<BlogPost/>}/>} path="blog/post/:slug"/>
    <Route element={<NavRoute element={<Posts/>}/>} path="blog"/>
    <Route element={<NavRoute element={<About/>}/>} path="about"/>
    <Route element={<NotFound/>} path="*"/>
  </Routes>
</BrowserRouter>

This how I fetch data in BlogPost.js

useEffect(() => {
    sanityClient.fetch(`*[slug.current == "${slug}"]{
        title,
        _id,
        slug,
        mainImage{
            asset->{
                _id,
                url
            }
        },
        body,
        "name": author->name,
        "authorImage": author->image,
        "date": publishedAt
    }`).then((data) => setSinglePost(data[0])).catch(console.error);
}, [slug]);

Is there a way to handle dynamic routing 404 errors ?

Quentin C
  • 307
  • 3
  • 13
  • 1
    What does "handle dynamic routing 404 errors" mean to you? Can you clarify what this means and what you want to happen? Do you mean `path="blog/post/:slug"` was matched but the *actual* route param value isn't valid? The `BlogPost` component should validate the `slug` value and handle accordingly. – Drew Reese Jan 22 '22 at 10:13
  • Actually when I should get a 404 when a bad slug is in the URL, it gets me the React component of a blog post with no content displayed whereas I should get a 404 and get redirected to my NotFound page – Quentin C Jan 22 '22 at 10:52
  • Is this something Sanity can do (*sorry, I'm unfamiliar*), validate the slug and handle the redirect... or does it just serve up the page with no content? Either way, you won't solve this problem with `react-router-dom` alone. Can you share this `BlogPost` component? – Drew Reese Jan 22 '22 at 10:56
  • I edited my post so you can check my BlogPost.js code but I don't know a way to handle it with Sanity since it doesn't render pages but actually send me the requested data Now a way of getting by would be to navigate from this page if I don't get the requested blogpost but it doesn't sound a good solution to me – Quentin C Jan 22 '22 at 12:04
  • 1
    Hi Quentin. This is a problem that’s not inherent to Sanity. Drew’s advice is applicable, both above and [here](https://stackoverflow.com/a/66538924). I expect you’ll want to handle your logic in your component to determine if the slug returned data, and then render accordingly. – Geoff Ball Jan 22 '22 at 17:10
  • Thank you for the explanation @Geoff and as I thought sanity has nothing to do with this brainfuck problem but I'll stick with a simple "not found" message in the page since it is simpler than handling 404 errors in a weird way – Quentin C Jan 23 '22 at 12:06
  • Ok guys so I've been struggling for days now trying to handle the case when sanity doesn't return anything if there is no post in the database corresponding to the slug in url. So now what I'd like to do is returning a React component in the `.catch()` when fetching data from sanity. That is the real problem I am facing. Shall I open another question for this ? – Quentin C Jan 29 '22 at 11:47

0 Answers0