Develop Reference

React and Node show nothing when i run the localhost

i have a issue with my projec, i am doing everything just like the man of tutorial, but when i run the server, my http://localhost:3000/ show me nothing, there is not error, but neither do nothing.
All this hapenned when i imported the react-roter-dom and changed the App.js
from This
function App() {
return (
<div>
<h1>Hello world</h1>
</div>
);
}
export default App;
to this
import React from "react";
import { createRoot } from "react-dom/client";
import {
createBrowserRouter,
RouterProvider,
Route,
Link,
} from "react-router-dom";
import Login from "./pages/Login";
import Register from "./pages/Register"
const router = createBrowserRouter([
{
path: "/",
element: <div> This is home world!</div>,
},
]);
function App() {
return (
<div>
<RouterProvider router={router}> </RouterProvider>
</div>
);
}
export default App;
and it should at least show the message "this is home world"
Please help me, Because i dont know what is hapening, no show error but it doesn't do anything either
this is what i got
after the router dom
before put the router dom show me " hello world" with this
function App() {
return (
<div>
<h1>Hello world</h1>
</div>
);
}
export default App;
index.JS
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
dev console
App.js
import React from "react";
import { createRoot } from "react-dom/client";
import {
createBrowserRouter,
RouterProvider,
Route,
Link,
} from "react-router-dom";
import Login from "./pages/Login";
import Register from "./pages/Register"
const router = createBrowserRouter([
{
path: "/",
element: <div> This is home world!</div>,
},
]);
function App() {
return (
<div>
<RouterProvider router={router}/>
</div>
);
}
export default App;
the consolo show me these errors

I think you just didn't save the initial code. You might want to turn on autosave on your vs code. And use the normal react render method for your index and app files.
Index.js :
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App/>,
document.getElementById('root'));
App.js:
import React from 'react'
const App = () => {
return (
<div>
<h1>GPT-3</h1>
</div>
)
}
export default App
Try to run this but save the code or turn on auto-save

React render function not returning the simple HTML codes from it's components

I am creating a project using MERN stack.In my App.js I imported some react component but while I run it shows a blank White screen.
App.js
import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { BrowserRouter as Router, Route} from "react-router-dom";
import Navbar from "./components/navbar"
import CreateUser from "./components/create-user";
function App() {
return (
<Router>
<div className="container">
<Route path="/" component={Navbar} />
<br/>
<Route path="/user" component={CreateUser} />
</div>
</Router>
);
}
export default App;
navbar.js
import React, { Component } from 'react';
// import { Link } from 'react-router-dom';
export default class Navbar extends Component {
render() {
return (
<h1>Pantha</h1>
);
}
}

Seeing blank page in nested routes in react-router v4

I am new to react and still learning.
I am trying to add nested routes in my react project, so that a content of div changes based on the route.
Following are my components :-
//index.js
import 'bootstrap/dist/css/bootstrap.min.css';
import 'font-awesome/css/font-awesome.min.css';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
library.add(faIgloo);
ReactDOM.render(<BrowserRouter>
<App />
</BrowserRouter>, document.getElementById('root'));
serviceWorker.unregister();
// app.js
import React, { Component } from 'react';
import { Route, Switch, Redirect } from 'react-router-dom';
import Login from './components/login/login.js'
import Protected from './components/protected/protected.js'
import './App.css';
class App extends Component {
render() {
return (
<Switch>
<Route exact path="/protected" component={Protected}/>
<Route path="/login" component={Login}/>
</Switch>
);
}
}
export default App;
//protected.js
import React, { Component } from 'react';
import { Route, Switch } from 'react-router-dom';
import Header from './header/header.js';
import './protected.css';
import CafePreview from './cafepreview/cafepreview.js'
class Protected extends Component {
render() {
const {match} = this.props;
return (
<div>
<Header></Header>
{/*<Preview/>*/}
<Switch>
<Route path='/protected/cafepreview' component={CafePreview}/>
</Switch>
</div>
);
}
}
export default Protected
// cafepreview.js
import React, { Component } from 'react';
import { Route, Switch } from 'react-router-dom';
import './preview.css';
console.log("here");
class CafePreview extends Component {
render() {
return (
<div>
<div>
<i class="fa fas fa-arrow-left"></i>
<span> BACK TO ALL CAFES </span>
</div>
</div>
);
}
}
export default CafePreview
When i open '/protected' i can see the header coming, but when i try to open '/protected/cafepreview' i see an empty page instead of header with cafe preview html.
I tried some options mentioned in this stackoverflow thread Multiple Nested Routes in react-router-dom v4 but none of them worked.
I hope i have explained my problem clearly.

Check documentation https://reacttraining.com/react-router/web/api/Route/exact-bool. Remove exact from the route in the App component and it will start working.

its because you have set exact in the app.js file. Remove it from the particular route. It'll work

You should not use <Route> or withRouter() outside a <Router>

I have wrapped my index.js file to support a Redux Store and React-Router-v4.
However, when I try to run a basic test, I get the following error message:
Invariant Violation: You should not use <Route> or withRouter() outside a <Router>
Here is what my index.js looks like:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
import registerServiceWorker from './registerServiceWorker';
// Redux
import { Provider } from 'react-redux';
import store from "./store/index";
ReactDOM.render((
<Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>
), document.getElementById('root'));
registerServiceWorker();
and here is my App.js:
import React, { Component } from 'react';
import { ScaleLoader } from 'react-spinners';
import { withRouter } from 'react-router';
import Header from './components/Header';
import Footer from './components/Footer';
import Main from './Main';
import './styles/styles.scss';
// Redux
import { connect } from 'react-redux';
import store from "./store/index";
import { isLoading } from "./actions/index";
class App extends Component {
constructor() {
super();
store.dispatch(isLoading(true));
}
componentDidUpdate(prevProps) {
if (this.props.location.pathname !== prevProps.location.pathname) {
store.dispatch(isLoading(true));
}
}
render() {
return (
<div className='App'>
<Header />
<div className='App__wrapper'>
<div className={'loading-spinner ' + (this.props.isLoading ? null : '--hide-loader')}>
<ScaleLoader
color={'#123abc'}
loading={this.props.isLoading}
/>
</div>
<Main />
</div>
<Footer />
</div>
);
}
}
const mapStateToProps = (state) => ({ isLoading: state.isLoading });
export default withRouter(connect(mapStateToProps)(App));
Since I'm using withRouter to wrap for navigation, is this method discouraged? Should I be setting up withRouter at the index.js level?
Thank you!

Try importing your BrowserRouter like this:
import { BrowserRouter as Router } from 'react-router-dom'
Then replace everywhere it appears BrowserRouter with Router instead.

React Router Dom not rendering any component

I have a very simple project and react router dom is not rendering components. Sometimes it renders the component for first route but then it doesn't render.
Here's the code for App.js:
import React, { Component } from 'react';
import { Provider } from "react-redux";
import {
BrowserRouter as Router,
Route
} from "react-router-dom";
import store from "./store";
import createHistory from 'history/createBrowserHistory';
import { IntroJm } from './components/intro/jm';
import { IntroNfc } from './components/intro/nfc';
import { IntroTxn } from './components/intro/txn';
import './assets/sass/main.scss';
import './static/css/main.scss';
import './static/css/pure.min.scss';
import './App.scss';
let browserHistory = createHistory();
class App extends Component {
componentDidMount() {
browserHistory.push("/intro/jm");
}
render() {
return (
<Provider store={store}>
<div>
<Router>
<div>
<Route path="/intro/jm" component={IntroJm} />
<Route path="/intro/nfc" component={IntroNfc} />
<Route path="/intro/txn" component={IntroTxn} />
</div>
</Router>
</div>
</Provider>
);
}
}
export default App;
All the route components are simple component with a span tag only.
Please help

You can try wrapping your component with WithRouter and then changing the route with this.props.history.push()
Try
import React, { Component } from 'react';
import { Provider } from "react-redux";
import {
BrowserRouter as Router,
Route
} from "react-router-dom";
import {withRouter} 'react-router';
import store from "./store";
import { IntroJm } from './components/intro/jm';
import { IntroNfc } from './components/intro/nfc';
import { IntroTxn } from './components/intro/txn';
import './assets/sass/main.scss';
import './static/css/main.scss';
import './static/css/pure.min.scss';
import './App.scss';
let browserHistory = createHistory();
class App extends Component {
componentDidMount() {
this.props.history.push("/intro/jm");
}
render() {
return (
<Provider store={store}>
<div>
<Router>
<div>
<Route path="/intro/jm" component={IntroJm} />
<Route path="/intro/nfc" component={IntroNfc} />
<Route path="/intro/txn" component={IntroTxn} />
</div>
</Router>
</div>
</Provider>
);
}
}
export default withRouter(App);