React router renders blank page using exact on all routes

February 20, 2021 by admin

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.

App.js
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(() => {
    Store.dispatch(loadUser());
  }, []);

  return (
    <div className="App">
      <Provider store={Store}>
        <AlertProvider template={AlertTemplate} {...alertOptions}>
          <Router>
            <Switch>
              <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} />
            </Switch>
          </Router>
        </AlertProvider>
      </Provider>
    </div>
  );
}

export default App;

EditPost.js
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) => {
  console.log(props);
  const [title, setTitle] = useState(props.location.postData.title);
  const [description, setDescription] = useState(
    props.location.postData.description
  );
  const [body, setBody] = useState(props.location.postData.body);

  const titleChange = (e) => {
    setTitle(e.target.value);
  };

  const bodyChange = (e) => {
    setBody(e.target.value);
  };

  const desChange = (e) => {
    setDescription(e.target.value);
  };

  const addClick = (e) => {
    e.preventDefault();
    const post = { title, body, description };
    props.updatePost(post);
  };

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

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

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

Post.js
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 (
    <Card>
      <Card.Body>
        <Link to={`/post/${props.id}`}>
          <Card.Title>{props.title}</Card.Title>
        </Link>
        <Card.Text>{props.description}</Card.Text>
      </Card.Body>
      <Card.Footer>
        <div className="d-flex justify-content-between">
          <small className="text-muted">
            {dateFormat(props.created, "mmmm dS, yyyy")}
          </small>
          {props.postUser === props.user ? (
            <Link to={`/edit-post/${props.id}`}>
              <i className="fas fa-edit" style={{ color: "grey" }}></i>
            </Link>
          ) : null}
        </div>
      </Card.Footer>
    </Card>
  );
};

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.