0

I'm working on a project with React Router trying to build a WordPress theme that is entirely React on the frontend. Everything seems to be working correctly when navigating throughout the app as expected. However, I have a /blog which maps to a Blog component and when /blog is refreshed it redirects to one of the blog posts /blog-component. This is strange because this isn't even a page on the site it should be /blog/blog-component because that is one of the posts.

Here's a link to a demo of this if you'd like to see exactly what is happening http://api.digitalreactor.co

This is what the main app component looks like.

import React from "react";
import { BrowserRouter as Router, Route, Switch, Redirect } from "react-router-dom";
import Home from './pages/Home';
import Page from './pages/Page';
import BlogPost from './pages/BlogPost';
import Blog from './pages/Blog';
import Header from './components/Header';
import Footer from './components/Footer';

class App extends React.Component {
  render() {
    return (
      <Router>
        <div>
            <Header/>
              <Switch>
                <Route exact path="/" component={Home} />
                <Route exact path="/blog" component={Blog} />
                <Route path="/blog/:slug" component={BlogPost} />
                <Route path="/:slug" component={Page} />
              </Switch>
            <Footer/>
        </div>
      </Router>
    );
  }
}

export default App;

You could also view the repo here: https://github.com/freddiemixell/WordPress-React

This is basically just like Create React App except everything is happening in /react-src instead of /src

Something interesting: When this refresh happens I'm noticing that the 404 error is firing. This means that on refresh the <Route path="/:slug" component={Page} /> is being called. That 404 is only in place if the WordPress REST API doesn't return a page title.

That being said, is there anyway I could change Page.js to redirect back to the Blog.js component by using withRouter to detect this.props.location.pathname === '/blog/'

WordPressFreddie
  • 129
  • 2
  • 12

0 Answers0