score:2

Accepted answer

well, to make this work, you need to change two things in your current code.

  1. use the switch from the react-router-dom and wrap your routes within it.
  2. make your home page (/) route exact instead of the /form-status route, because the /form-status route also includes the leading slash (/). so since both of them will match the expected route it will render them together.

so your code should be something like this in the app.js:

import react from "react";
import form from "./components/form";
import formstatus from "./components/formstatus";
import { browserrouter as router, route, switch } from "react-router-dom";

export default function app() {
  return (
    <router>
      <switch>
        <div classname="app">
          <route exact path="/" component={form} />
          <route path="/form-status" component={formstatus} />
        </div>
      </switch>
    </router>
  );
}

working demo:

codesandbox


Related Query

More Query from same tag