Let’s build a WordPress theme with React: Part 2 (Routes)

Now let’s make sure we’re in development mode by running

npm run wpstart

Let’s create a new component called “Page”. Inside it, let’s start simple and put in the code below:

import React from 'react';

function Page() {
    return (
        <div className="Page">
            this is the page component
        </div>
    )
}

export default Page;

Pretty basic right? Now let’s install react router by running the command below:

npm install react-router-dom

Open up index.js and include react router in it

import { BrowserRouter, Switch, Route } from 'react-router-dom';

Inside the render function, let’s modify it to look like this:

ReactDOM.render(
<BrowserRouter>
    <Switch>
     <Route path='/page' component={Page}/>     
    </Switch>
  </BrowserRouter>, document.getElementById('root'));

Now navigate to your site, but append the path “/page”. You should see your page component rendered.

Now let’s go back to index.js and modify the Route to look like below:

<Route path="/page/:slug" component={Page} />    

Notice we’re adding a :slug to the path. We’re going to be updating our component with this parameter. The slug will be the actual “slug” of the WordPress post. If you modify our page component with:

<h1>this is the slug: {this.props.match.params.slug}</h1>

You should see something like below:

So by now, you should see how we’re going to continue with our theme. We’re going to be adding the following routes:

  • Home
  • Page + slug
  • Post + slug
  • Archive
  • Search + term
  • 404

Go ahead and copy the page component to match the routes above. I am keeping them in a folder called “routes” just to keep it organized. But you are free to structure your application any way you want:

Our index.js now looks like below:

import React from 'react';
import ReactDOM from 'react-dom';
import { Route, BrowserRouter as Router, Switch } from 'react-router-dom'
import './index.css';
import Home from './routes/Home';
import Page from './routes/Page';
import Post from './routes/Post';
import Archive from './routes/Archive';
import Search from './routes/Search';
import Notfound from './routes/Notfound';
import * as serviceWorker from './serviceWorker';

const routes = (
    <Router>
      <Switch>
          <Route exact path="/" component={Home} />          
          <Route path="/page/:slug" component={Page} />    
          <Route path="/post/:slug" component={Post} />  
          <Route path="/archive" component={Archive} />
          <Route path="/search/:term" component={Search} />
          <Route component={Notfound} />       
      </Switch>
    </Router>
  )

ReactDOM.render(routes, document.getElementById('root'));

To browse the entire code up to this point in the tutorial, view this commit.

Partials

Now that we have our routes and components, it’s a perfect time to think about our partials. Partials are components that we will be reusing in each route component. Things that come to mind are header, footer, sidebar – and whichever reusable piece of code we will come across along the way.

Let’s store these files in its own folder called “partials“. Also, each route component will be using its own state. While partial components will rely on props. If you don’t know what the difference between state and props are, here is a good article about that.

Let’s go ahead and create 2 partials. Head.js and Foot.js. These will be the header and footer of our pages. The code will be a simple functional component like below:

/******Head.js*************/

import React from 'react'
function Head(){
    return (<div className="header">header</div>)
}
export default Head;

/******Foot.js*************/

import React from 'react'
function Foot(){
    return (<div className="footer">footer</div>)
}
export default Foot;

Now in our route components, simply import, and add the components in. Here is the how our Home.js will look like with the partials. Note – make sure you add them inside the main div:

import React from 'react'
import Head from '../partials/Head';
import Foot from '../partials/Foot';

class Home extends React.Component {
  render() {
    return (
      <div className="home">
          <Head></Head>
          <h1>Home</h1>
          <Foot></Foot>
      </div>
    )
  }
}
export default Home

In the browser, you will see our partials and home page starting to take shape. Inspect the code and it should look like below:

Do the same thing to the rest of our main components so they all share the same header and footer. You can see the code up to this point in this commit.

And that should wrap up this session. Let’s pick it up again next time where we’re going to build the Archive and Search pages.

Leave a Comment.