score:0
you should specify which version of react-router-dom you are using. so i'm just gonna assume, you are using the latest v6.
in your app.js
file, you have to make the following changes in order to work:
import { routes, route } from "react-router-dom";
import 'bootstrap/dist/css/bootstrap.min.css';
import pending from './pages/home';
import home from './pages/pending';
export default function app() {
return (
<routes>
<route index path="/" element={<home />}/>
<route path="pending" element={<pending />} />
</routes>
);
}
for more info, please visit the official documentation here!
score:0
import './app.css';
import { browserrouter as router , route, routes } from "react-router-dom";
import header from './components/header';
import footer from './components/footer';
import home from './components/home';
import about from './components/about';
function app() {
return (
<>
<router>
<header/>
<routes>
<route path="/" element={ <home/> } />
<route path="/about" element={ <about/> } />
</routes>
<footer/>
</router>
</>
);
}
export default app;
score:3
issue
the route
component api changed in react-router-dom@6
. all routed content is now rendered on a single element
prop as a reactnode
, a.k.a. jsx, not a reference to a react component.
solution
render the routed components as jsx, i.e. <home />
instead of home
.
import { browserrouter, routes, route } from "react-router-dom";
import 'bootstrap/dist/css/bootstrap.min.css';
import pending from './pages/home';
import home from './pages/pending';
export default function app() {
return (
<browserrouter>
<routes>
<route path="/" element={<home />} />
<route path="/pending" element={<pending />} />
</routes>
</browserrouter>
);
}
Source: stackoverflow.com
Related Query
- React App goes blank after importing React-Router-Dom
- React router not working after building the app
- Getting blank page after react app publish in github
- React router after adding createBrowserHistory, the app is not working as expected
- Getting blank screen in windows after electron-builder react electron app
- My react app appears blank after successfully deploying to github-pages
- Got a blank white page after deploying react app to gitlab pages
- Getting blank page after deploying React app to surge.sh
- React Router Dom doesn't redirect to specified path on entering of wrong path after handling that. How do I fix it?
- React router dom routes are returning blank pages
- React Router Dom v6 useNavigate to Conditional Path Directory After Login
- ReactJS: Go to anchor link in HTML with react router dom only after the full page load
- React.createElement: type is invalid error after bundling and importing react component to another react app
- React Router Dom & Firebase Auth: history.push changes url but does not render new component when called after firebase auth create account
- Blank screen after deploying react app on Vercel
- Blank page on login/logout with history.push in React Router Dom
- Blank page after deployment - React app with node
- Seeing Blank page After refresh in nested routes in React Router
- How to redirect to home in react router dom after login with redux?
- React router is just showing a blank page after I structure like the şmage below
- Ionic react app showing blank page after first state change
- React app goes blank when i send a function
- React router dom renders a blank page
- React app renders in browser but goes blank if page is refreshed
- How to render an iframe of local page within React app using React Router Dom
- Render route in React router dom after useEffect
- Chrome is showing strange errors for my React App after installing Router
- React router dom white screen after a few navigations
- react router dom not re-rendering after connecting the router component with redux
- React Router Dom doesn't redirect me after signing in
More Query from same tag
- How do I delete an image when I delete the post or the structure that contained it, with multer?
- create-next-app' is not recognized as an internal or external command, operable program or batch file
- How can I pass array values to another component?
- How to get current state inside useCallback when using useReducer?
- componentDidMount to get DOM node got error
- Action not being returned properly when triggered from Component
- What is AMP HTML and how does it fit in with framework/tool X?
- How to Prevent Child Component Re-Render when Parent state changes
- Displaying the area in chart below or above threshold value is not working in D3
- Avoid recursive rendering with promises?
- How to test if a component is rendered with the right props when using react-testing-library?
- Redux state not updating right away?
- How to transfer states among components?
- useHistory function in ReactJS
- What to do when I have a placeholder type as string but a value type as number?
- How to create a Single Page Application using react-router
- material ui pagination component text color to be grey
- Cannot correctly setup React-Router-Dom
- How to turn redux-thunk action creator into Promise?
- how can I access an array inside an object?
- React - how to show the difference between the current and next props?
- Material UI select multiple dates with Calendar
- Canvas wont draw anything - React, Typescript
- How to create text border in React Native?
- Warning: Can't perform a React state update on an unmounted component. useEffect cleanup function
- react How to hide the Card when another location is pressed
- Click to apply style to an element whilst removing from others
- getStaticPaths throws "TypeError: segment.replace is not a function"
- how to set start or end date of antD rangePicker to empty
- How to build programmatically the path for object data in React