React router renders blank page using exact on all routes

I have a problem with one of my components in which react router returns a blank page when accessing it. It only happens in one component and I do not know why.The component that has the problem is the EditPost component.

This is where all the routes are.

import "./App.css";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Home from "./components/Home.js";
import Signup from "./components/signup/Signup";
import Login from "./components/Login/Login";
import Dashboard from "./components/Dashboard/Dashboard";
import PrivateRoute from "./components/common/PrivateRoutes";
import { Provider } from "react-redux";
import Store from "./Store";
import { Provider as AlertProvider } from "react-alert";
import AlertTemplate from "react-alert-template-basic";
import { loadUser } from "./actions/auth";
import { useEffect } from "react";
import PostPage from "./components/PostPage/PostPage";
import EditPost from "./components/EditPost/EditPost";

// Alert options
const alertOptions = {
  timeout: 3000,

function App() {
  useEffect(() => {
  }, []);

  return (
    <div className="App">
      <Provider store={Store}>
        <AlertProvider template={AlertTemplate} {...alertOptions}>
              <Route exact path="/post-edit/:id" component={EditPost} />
              <Route exact path="/signup" component={Signup} />
              <Route exact path="/login" component={Login} />
              <PrivateRoute exact path="/dashboard" component={Dashboard} />
              <Route exact path="/" component={Home} />
              <Route exact path="/post/:id" component={PostPage} />

export default App;

This is the component that does not render

import React, { useState } from "react";
import { Form, Button } from "react-bootstrap";
import { connect } from "react-redux";
import { updatePost } from "../../actions/posts";

const EditPost = (props) => {
  const [title, setTitle] = useState(props.location.postData.title);
  const [description, setDescription] = useState(
  const [body, setBody] = useState(props.location.postData.body);

  const titleChange = (e) => {

  const bodyChange = (e) => {

  const desChange = (e) => {

  const addClick = (e) => {
    const post = { title, body, description };

  return (
    <div className="mt-4">
      <h1>Edit Post</h1>
          <Form.Label>Post Title</Form.Label>
          <Form.Control onChange={titleChange} type="text" />
          <Form.Label>Short Description</Form.Label>
          <Form.Control onChange={desChange} type="text" />
          <Form.Control onChange={bodyChange} as="textarea" rows={3} />
        <Button onClick={addClick} variant="primary" type="submit">

const mapDispatchToProps = (dispatch) => {
  return {
    updatePost: (id, post) => dispatch(updatePost(id, post)),

export default connect(null, mapDispatchToProps)(EditPost);

In this component is the link to the EditPost component.

import React from "react";
import { Card } from "react-bootstrap";
import dateFormat from "dateformat";
import { Link } from "react-router-dom";
import { connect } from "react-redux";

const Post = (props) => {
  return (
        <Link to={`/post/${}`}>
        <div className="d-flex justify-content-between">
          <small className="text-muted">
            {dateFormat(props.created, "mmmm dS, yyyy")}
          {props.postUser === props.user ? (
            <Link to={`/edit-post/${}`}>
              <i className="fas fa-edit" style={{ color: "grey" }}></i>
          ) : null}

const mapStateToProps = (state) => {
  if (state.auth.isAuthenticated) {
    return {
      user: state.auth.user.username,
  } else {
    return {};

export default connect(mapStateToProps)(Post);

Right now I am just trying to get the component rendered, then I will worry about the props. Thanks in advance.

1 thought on “React router renders blank page using exact on all routes”

  1. Your link is /edit-post/${}.
    Your matched path is /post-edit/:id.

    edit-post and post-edit are not the same thing 😉

    I would recommend adding a NoMatch block at the end of your Switch. It’ll help you to diagnose these problems faster.

      <NoMatch />

Leave a Comment