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')
);

My react app doen't display any content after I deploy it on digital ocean

I've successfully deployed my react app on digital ocean as a static site. But when I click to see the live app the link only shows me a blank page, instead of show me the landing page (dashboard).
The command I used for the build
npm build
The code in my index.js file
import React from "react";
import ReactDOM from "react-dom";
import { createBrowserHistory } from "history";
import { Router, Route, Switch, Redirect } from "react-router-dom";
// core components
import Admin from "layouts/Admin.js";
import RTL from "layouts/RTL.js";
import "assets/css/material-dashboard-react.css?v=1.9.0";
import 'bootstrap/dist/css/bootstrap.min.css';
const hist = createBrowserHistory();
ReactDOM.render(
<Router history={hist}>
<Switch>
<Route path="/admin" component={Admin} />
<Route path="/rtl" component={RTL} />
<Redirect from="/" to="/admin/dashboard" />
</Switch>
</Router>,
document.getElementById("root")
);
my project structure
[1]: https://i.stack.imgur.com/JL2Yi.png

I found the solution. I just had to edit the package.json file and change the homepage attribute like this:
"homepage": ""

JSSProvider not generating class prefix with classNamePrefix

I'm using material-react in my React project. We are using material-react in both shell and micro-frontend. The class names generated by both shell and micro-frontend are being same viz., .jss1, .jss2 which is causing style collisions.
Im trying to generate unique class names for the micro-frontend, something like App1-{className} using JssProvider classNamePrefix prop, but still the classnames are generating as it is (.jss1, .jss2 etc). I have installed react-jss#10.0.0 as of now. I have tried many solutions from stackoverflow and github issues as well. But none of them are working for me.
import React from "react";
import ReactDOM from "react-dom";
import { JssProvider } from "react-jss";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import App from "./components/App";
import "./styles.css";
import { Provider } from "react-redux";
const routing = (
<JssProvider classNamePrefix="App1">
<Provider>
<Router>
<Switch>
<Route exact path="/" component={App} />
</Switch>
</Router>
</Provider>
</JssProvider>
);
ReactDOM.render(routing, document.getElementById("root"));
Following is the css classes that are getting generated in prod environment.
I need something like App1-{className} for the class names, so that they don't clash with other styles with similar names.
I have followed these stackoverflow links, but unfortunately none of them are working for me.
React Admin displays very messed up
https://github.com/marmelab/react-admin/issues/1782
Please help me solve this thing. I feel i'm missing something very basic.

You could use the seed option of createGenerateClassName function which is part of #material-ui/core/styles:
options.seed (String [optional]): Defaults to ''. The string used to uniquely identify the generator. It can be used to avoid class name collisions when using multiple generators in the same document.
import React from "react";
import ReactDOM from "react-dom";
import { StylesProvider, createGenerateClassName } from '#material-ui/core/styles';
import { Provider } from "react-redux";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import App from "./components/App";
import "./styles.css";
const generateClassName = createGenerateClassName({
seed: 'App1',
});
export default function App() {
return (
<StylesProvider generateClassName={generateClassName}>
<Provider>
<Router>
<Switch>
<Route exact path="/" component={App} />
</Switch>
</Router>
</Provider>
</StylesProvider>
);
}

This part of the material-ui documenation solved my issue.
https://material-ui.com/styles/api/#creategenerateclassname-options-class-name-generator
Strangely the JSSProvider solution was not working for me, whereas it was working for others. For those who faced similar issue, can use StyleProvider instead of JSSProvider.

Have you tried to install same versions of material-ui in all of your libraries?
I had the same problem, I have different material ui versions in my app and in my custom component library. Installing the same version works for me.

React-router , router not workingg

I'm newbie in reactjs, I tried build something with it but I had problem with react-router-redux. I get React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. in console. Here is my code :
App.js
import React, { PropTypes } from 'react';
class App extends React.Component {
render() {
return (
<div>
{this.props.children}
</div>
);
}
}
export default App;
Routes.js
import React from 'react';
import { Route, IndexRoute } from 'react-router'
import App from './components/App';
import Login from './components/login/Login';
import Register from './components/register/Register';
export default (
<Route path="/" component={App}>
<IndexRoute component={Login}/>
<Route path="register" component={Register}/>
</Route>
);
And Index.js
...
import { syncHistoryWithStore } from 'react-router-redux'
import { Router } from 'react-router'
import { createBrowserHistory } from 'history';
import routes from './routes';
const store = configureStore();
const history = syncHistoryWithStore(createBrowserHistory(), store)
ReactDOM.render(
<Provider store={store}>
<Router history={history} routes={routes}>
</Router>
</Provider>,
document.getElementById('app')
);
Where is my wrong? Please explain for me why I get this error. Thank in advance

React-router-redux is no longer maintained and support only 3.x and 2.x React-router versions
Repo authors suggest using connected-react-router for React-rotuer 4.x bindings

There are different routers for different environments, you want to use BrowserRouter instead of Router.
See React Training BrowserRouter for more information.
index.js
// change this line
import { Router } from 'react-router';
// to
import { BrowserRouter as Router } from 'react-router-dom';
NOTE: You might also have to pass in your routes in a different way. This is shown in the React Training page provided above.

Uncaught TypeError: Cannot read property 'PropTypes' of undefined(…) React Bootstrap problems, also ReactDOM is not defined issues with proper import

So I'm building a react-JS website with express serving the back-end. I'm using react-router and react-stormpath for authentication. Using webpack as well. I'm having issues with bootstrap javascript loading. I installed react-bootstrap and am serving the css file from express with no problem. However, when I try to render, I get several errors, one pertaining to ReactDOM not recognizing
ReactDOM(Uncaught ReferenceError: ReactDOM is not defined(…)), and another 2 pertaining to bootstrap(Uncaught TypeError: Cannot read property 'PropTypes' of undefined(…) & Uncaught SyntaxError: Unexpected token :). This is my first React application, so any help would be greatly appreciated!
/* jshint esversion: 6 */
import React, { PropTypes } from 'react'
import ReactDOM from 'react-dom'
import { LoginLink } from 'react-stormpath'
import ReactStormpath, { Router, HomeRoute, LoginRoute, AuthenticatedRoute } from 'react-stormpath'
import { Link, IndexRoute, Route, browserHistory } from 'react-router'
import { MasterPage, IndexPage, LoginPage, RegistrationPage, ProfilePage } from './pages'
import Index from './components/Index'
import index from './pages/index'
console.log("app.js loaded");
ReactStormpath.init();
ReactDOM.render(
<Router history={browserHistory}>
<HomeRoute path='/' component={MasterPage}>
<IndexRoute component={IndexPage} />
<LoginRoute path='/login' component={LoginPage} />
<Route path='/register' component={RegistrationPage} />
<AuthenticatedRoute>
<HomeRoute path='/profile' component={ProfilePage} />
<Route path='/:user/lists' component={List} />
</AuthenticatedRoute>
<Route path='/lists' component={List} >
<Route path="/lists/:list" component={List} />
</Route>
</HomeRoute>
</Router>,
document.getElementById('app')
);
ReactDOM.render(
<ListForm />,
document.getElementById('app')
);

Try to import prototypes as follows: import PropTypes from 'prop-types'

Before import proptypes you have to first install proptypes as follows:
npm install proptypes