We Keep Coding

React components not showing up on the screen [duplicate]

Im routing a page to the root, but its showing up as a blank page, no matter what js file I use. Not sure whats wrong, havent used react since last year but looks like they've updated react-router-dom so it doesnt use Switch anymore. Anyone know the correct syntax so the page shows up? Here are the files:
WebRoutes.js
import React from "react";
import { Routes, Route } from 'react-router-dom';
import { useNavigate } from "react-router-dom";
// Webpages
import App from './App';
import Welcome from './welcome';
import SignUp from './Signup'
export default function WebRoutes() {
return (
<Routes>
<Route path='/'>
<Welcome />
</Route>
</Routes>
);
}
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import WebRoutes from './WebRoutes';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<WebRoutes />
</React.StrictMode>,
document.getElementById('root')
);

In react-router-dom#6 the Route components don't render routed content as children, they use the element prop. Other Route components are the only valid children of a Route in the case of building nested routes.
export default function WebRoutes() {
return (
<Routes>
<Route path='/' element={<Welcome />} />
</Routes>
);
}
Ensure that you have rendered a router around your app.
import { BrowserRouter as Router } from 'react-router-dom';
ReactDOM.render(
<React.StrictMode>
<Router>
<WebRoutes />
</Router>
</React.StrictMode>,
document.getElementById('root')
);

React-Router-Dom (v6) not working / doesn't render component

When I try to render the "Home" component it just doesn't show anything... The path is correct, and the Router imports should be fine too. What am I missing? It worked on another project of mine and even if I copy and paste that code it doesn't seem to work.
App.js:
import React from "react";
import Home from "./components/Home"
import {BrowserRouter as Router, Route, Routes} from "react-router-dom"
function App() {
return (
<Router>
<Routes>
<Route exact path="/" element={<Home/>}/>
</Routes>
</Router>
);
}
export default App;
Home.js:
import React from 'react'
function Home() {
return (
<div>Home</div>
)
}
export default Home
index.js:
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
reportWebVitals();
I expected the "Home" component to be rendered as soon as I load the page, but it wasn't (Blank page). I checked if I imported it incorrectly, but as soon as I delete the "Router" and "Routes" tags as well as the Route itself and just try to render the "Home" component on its own, it works.
It's probably something really small that I'm missing but I can't seem to figure it out right now.

Using Route requires Switch component which means you'll do the following:
import React from "react";
import Home from "./components/Home"
import {BrowserRouter as Router, Route, Routes, Switch} from "react-router-dom"
function App() {
return (
<Switch>
<Route exact path="/" >
<Home/>
</Route>
</Switch>
);
}
export default App;

React routes not rendering [duplicate]

This question already has answers here:
React Router Dom routes are returning blank pages
(2 answers)
Closed 8 months ago.
I'm following along with this React Tutorial on YouTube but I can't get my routes to render on own dev server.
This is what my home screen is rendering. My home screen should show a pink background underneath the navigation bar.
I suspect the error is happening in this section of my App.js code, since everything else outside of works fine:
<Routes>
<Route exact path="/" component={HomeScreen}/>
</Routes>
I'm using react-router-dom v6.3.0
My App.js code:
import './App.css';
import { useState } from "react";
import { BrowserRouter as Router, Routes, Route} from "react-router-dom";
// Screens
import HomeScreen from './screens/HomeScreen';
// Components
import Navbar from './components/Navbar';
import SideDrawer from './components/SideDrawer';
import Backdrop from './components/Backdrop';
function App() {
const [sideToggle, setSideToggle] = useState(false);
return (
<Router>
<Navbar click={() => setSideToggle(true)} />
<SideDrawer show={sideToggle} click={() => setSideToggle(false)} />
<Backdrop show={sideToggle} click={() => setSideToggle(false)} />
<main>
<div className="app">This is a test</div>
<Routes>
<Route exact path="/" component={HomeScreen}/>
</Routes>
</main>
</Router>
);
}
export default App;
My index.js code:
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById("root")
);
reportWebVitals();
My HomeScreen code:
import "./HomeScreen.css";
const HomeScreen = () => {
return (
<div className="homescreen">
Home Screen
</div>
)
}
export default HomeScreen
Hope someone's able to give some advice to a React newbie?
Please let me know if I need to provide more info.

Wen, If you are using react-router-dom v6.3.0. then you have to use
<Routes>
<Route exact path="/" element={<HomeScreen/>}/>
</Routes>

I think there is your error:
import React from "react"; import { BrowserRouter} from "react-router-dom"; import ReactDOM from "react-dom";import "./index.css";import App from "./App";import reportWebVitals from "./reportWebVitals";ReactDOM.render(<React.StrictMode>BrowserRouter><App>BrowserRouter>React.StrictMode>,document.getElementById("root")reportWebVitals();
you need to cover app component in browserouter if it doesn't work than update your react-router-dom ande try thise simple docs

It should be element, not component, that property that renders a component for a Route, and the component should be called:
<Route exact path="/" component={<HomeScreen/>}/>
What you have there is for React Router Dom v5.

react router dom can't get page

I'm using react with express using web pack but react router dom create an error i.e The null match problem.It can't get the page and the match is Null.
MY routes page code is: routes.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route} from 'react-router-dom';
import App from './App.js';
import language from './language.js';
import Page from './Page.js';
const Routes = () => (
<Router>
<div>
<Route path='/' component={App} />
<Route path='/page' component={Page} />
<Route path='/language' component={language} />
</div>
</Router>
)
console.log(typeof Routes)
export default Routes;

I have created sample snippet same as your code.
But its working fine. I am not getting any error
Check out this Snippet

React installed react router but cannot get the page to render

I've installed react router and I'm trying to get the main page to render.
This is the current index.js
import React, { Component, PropTypes } from 'react';
import { Router, Route } from 'react-router';
import Layout from './components/Layout';
import NewsComponent from './components/NewsComponent';
<Router>
<div>
<Route exact path="/" component={Layout} />
<Route path="/news" component={NewsComponent} />
</div>
</Router>
const app = document.getElementById('app')
ReactDOM.render(
<Router history={hashHistory}>
<Route path="/" component={Layout} />
</Router>, app);
The Layout component contains the layout of the page.
What I'm I missing?
I'm I doing this wrong?

There are some references you are missing, I dont know if you have omitted them just for this example or you are really missing them. Try this:
import React from 'react';
import ReactDOM from 'react-dom'; //Missing in your example
import {
Router,
Route,
browserHistory //Missing in your example
} from 'react-router';
import Layout from './components/Layout';
ReactDOM.render(
<Router history={browserHistory}>
<Route path="/" component={Layout} />
</Router>,
document.getElementById('root')
)
Then in your component you can even navigate through history:
import { hashHistory } from 'react-router'
//Dont forget to bind this in the constructor
yourMethod (someParams) {
hashHistory.push(someUrl)
}

Try explicitly importing ReactDOM (import ReactDOM from 'react-dom'); it isn't automatically included when you import React.

In addition to modifying your code [missing imports, etc.], you'd want to specifically mention the version of the react-router you are using. Assuming that you are using NPM
Try:
npm remove react-router
Then:
npm install --save react-router#3.0.0
React-router V4, which is installed by default, is a complete re-envisioning of the react-router and is not compatible with the codes written for the previous versions of react-router.
If you haven't used React in a while, I suggest you use create-react-app. Starting from there will be quite straightforward:
https://github.com/facebookincubator/create-react-app