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/'