score:2
Accepted answer
the component apis changed significantly from react-router-dom@5
to react-router-dom@6
. the route
components must be rendered within a routes
component, and the component
prop was replaced by a single element
prop that takes a reactnode
i.e. jsx.
import { browserrouter as router, routes, route} from "react-router-dom";
import navbar from "./components/navbar.component"
import exerciseslist from "./components/exercises-list.component";
import editexercise from "./components/edit-exercise.component";
import createexercise from "./components/create-exercise.component";
import createuser from "./components/create-user.component";
function app() {
return (
<router>
<div classname="container">
<navbar />
<br/>
<routes>
<route path="/" element={<exerciseslist />} />
<route path="/edit/:id" element={<editexercise />} />
<route path="/create" element={<createexercise />} />
<route path="/user" element={<createuser />} />
</routes>
</div>
</router>
);
}
for more detail regarding all the changes between versions see the v5-v6 migration guide.
Source: stackoverflow.com
Related Query
- Reactjs=> React App rendering blank page error
- Why IE 11 display blank page rendering react app
- React app rendering empty page with no error from the console
- Getting blank page after react app publish in github
- React Router v6 rendering blank page
- ReactJS rendering a collection of children throws "Invariant Violation: Objects are not valid as a React child" error
- React app suddenly blank page - mime problem?
- React App Table Help - Data is not rendering on page correctly
- Create React App Blank Page when including on existing site
- Error while rendering react components in angular app
- Got a blank white page after deploying react app to gitlab pages
- Getting blank page after deploying React app to surge.sh
- React Router rendering blank page
- Getting a blank page in react app while deploying using ngnix as reverse proxy
- GitHub pages link returns blank page for React app
- Blank page after deployment - React app with node
- React App renders blank page on Github Pages
- ReactJS error when accessing page using Server-side Rendering
- React Router not rendering component at path, returns blank page with correct pathing
- React Native WebView rendering blank page
- React app deployment on github pages shows a blank page
- Blank page when deploying React App to gh pages
- Ionic react app showing blank page after first state change
- React app is not rendering at all when loading HTML page that contains it
- deploying react app in Heroku gets a blank page
- React app renders in browser but goes blank if page is refreshed
- React Redux - element not rendering on page but React not throwing error
- react routing - rendering error (single page application)
- why the webpack build react app home page stay blank
- Blank page after running build on the react app and errors on the console
More Query from same tag
- On React MaterialTable, example to code Edit Button when option.selection row is enabled?
- Get list of all exported components in file
- How to get session in NextJS api route using with-iron-session?
- Why is my button undefined in my test?
- New property value not being rendered
- How to handle data fetch in react/redux component with propTypes?
- How to add "colSpan" attribute in ReactJS
- How can I write a Type Declaration for a JSX attribute from Google AMP that uses square brackets?
- Select value changes back to default after successful onChange
- Catching parameters in redirect with Gatsby.js
- share value from one component into another in reactjs
- How to import a csv file into react table correctly?
- intergation of flask for ML into a meteor.js app
- I have spent the last 8 hours trying to pass a simple JSON object with some data from an api through my express backend to one of my react components
- GoogleMap: center or defaultCenter property must be defined
- React Can't Access Array Inside Object
- Using create-react-app and connecting it to my git repository?
- How to get text inside Text component onPress in react-native
- How to style an a element that redirects to react component?
- Why won't my app render when state changes?
- Update an array object using useState
- useState to update multiple values in React
- difference between preset-react and react in babel
- How to use tree shaking for node modules with Webpack 5?
- CSS keyframes working fine in dev environment but not on production build
- React router: going direcly to child path is not working
- how to use react memo
- react final form add extra fields as props
- Rails with React app on Heroku routes don't work on refresh
- Add a child `div` component on button click (ReactJS)