score:2
Accepted answer
well, to make this work, you need to change two things in your current code.
- use the
switch
from thereact-router-dom
and wrap your routes within it. - make your home page (
/
) routeexact
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:
Source: stackoverflow.com
Related Query
- Open new page on click of button in react
- How to open a page in new tab on click of a button in react? I want to send some data to that page also
- Is there any method to open page using a React Router v6 on button click
- How to open a new page with specific dataset with a button click in react?
- How to open React component as new page from a button in different component
- My React 18 app does not reload automatically I try to click on the create new project button does not work unless I refresh the page manually
- Navigate to a new page with React when I click on a button
- Adding target=_blank to link tag in button in react does not open new page but disables it?
- Open a component in new window on a click in react
- Scroll page to the nested React component on a button click
- React router - pass api data to the linked component to open with a new page
- React render-pdf open in new page onclick Slow issue
- React Router - Open Link on new Tab and Redirect to Home Page
- Scroll down the page to another React component on a button click
- How to open an <input type="file"/> with a button click in React
- how to open datepicker on button click or icon click in react js
- My button needs to be clicked twice to render the new component for the first click React
- React - Log in submit button to render new page
- How to redirect another page after button on click method react js
- When I click cancel button in react why the page is reloading and why its path also changing in react?
- react js, when open page Other than home in new tab show 404
- React router nested, open new page as soon as there are params
- How do i redirect to a page from button click in react from a component?
- React Show data with page refresh on Button click
- React router - click on card and redirect to a new page with content of that card (card details) using useParams and reacthooks
- React router - click on card and redirect to a new page with content of that card (card details)
- How to get a login button to navigate to a new page once clicked. I have downloaded and used the React router dom
- How to Open React Native Expo Camera On Button Click
- How to click a button and navigate to a new route with URL params using React Router 4
- React 16 Hidden button Modal does not open on click
More Query from same tag
- How to import Ant design on demand to work with components which does destructuring?
- react-router-dom useHistory() not working
- Apexcharts - ReactJs - real time - Cannot read property 'filter' of undefined
- Radio Buttons in React using Bootstrap always post same value
- How to retrieve plain CSS from inline style in ReactJS?
- React-native, Firebase network error while trying to log in
- How to auto play a video in background in react using typescript?
- How to do CSS :hover function in JSX ?
- using useStates in js react how to display one div at a time
- Custom input element with Ant Design Autocomplete?
- How can I return data brought from axios in React.js?
- Unable to render the JSON object in a list from Github issues api
- Passing actions down the stack via props
- How can I understand MaterialUI styled component?
- Ternary operator doesn't return react component
- HTML-React-Parser returning object - not string?
- How to pass a geolocation lat lng from a function to another's `ll` property in React?
- ReactJS Conditional rendering is not working
- React Redux with SAGA - Create a queue of the same action
- Preact/React and setting state after fetch
- cannot set state with gatsby react Unhandled Rejection (TypeError): Cannot read property 'setState' of undefined
- Handle "outside react" DOM changes in react
- Web Audio API not playing sound
- Latest state is not reflected after dispatch until next render
- Can't Render Data with API Call
- React deployment to firebase using github actions
- Why I my React Project goes into infinite loop and keep rendering pokemons on the window?
- Using onclick in children
- React - Render components dinamically from json
- number formatting in antD tables, or localeCompare() number strings with commas