We Keep Coding

Nothing is rendering in root id

nothing is rendering on my page and i'm quite confused. I was wondering if anyone could help me with this
App.js:
import React from "react";
import Header from "../layout/Header/Header";
import Footer from "../layout/Footer/Footer.jsx";
import {
BrowserRouter as Router,
Route,
Switch,
Redirect
} from "react-router-dom";
import NotFound from "./NotFound";
import Home from "../pages/Home";
import Pricing from "../pages/Pricing";
import Contact from "../pages/Contact";
import About from "../pages/About";
import Dashboard from "../pages/Dashboard";
import Signin from "../pages/Signin";
class App extends React.component {
render() {
return (
<>
<div className="App">
<Header />
<Router>
<App />
<Switch>
<Route exact path="/home" component={Home} />
<Route exact path="/about" component={About} />
<Route exact path="/contact" component={Contact} />
<Route exact path="/pricing" component={Pricing} />
<Route exact path="/dashboard" component={Dashboard} />
<Route exact path="/signin" component={Signin} />
<Route component={NotFound} />
<Redirect from="/" to="home" />
</Switch>
</Router>
</div>
<Footer />
</>
);
}
}
export default App;
And here's my index.js:
import React from "react";
import { render } from "react-dom";
import App from "./components/App/App";
//import Signup from "components/pages/SignupBRUH";
import "./styles/styles.scss";
render(<App />, document.getElementById("root"));
My project is also using passport, if that helps with anything. This might be an error with routes or something. I don't know.
Would be awesome if someone could solve this for me, thanks.

Can you try rendering the below for App component, to make sure the template is wired up correctly
class App extends React.component {
render() {
return (
<>
<div>
App Component
</div>
</>
);
}
}

doesnot match reactjs navigation routing

I'm new to reactjs.I am trying to load my sidebar component and dashboard component at app starts.but when i click sidebar buttons it only loads that component and hide my sidebar
below is the pic of that....
below is the pic of when app starting
below is the picture when i click sidebar button it only load the relavant component and sidebar was hidden..!
this is my app.js
import React, {Component}from 'react';
import './App.css';
import {BrowserRouter,Switch,Route} from "react-router-dom";
import Navbar from "./components/layout/Navbar";
import Signin from "./components/auth/SignIn/Signin";
import './App.css';
import New3 from "./components/new3/New3";
import Dashboard from "./components/dashboard/Dashboard";
import {StyleRoot} from "radium";
import Item from "./components/item/Item";
import Profile from "./components/profile/Profile";
function App() {
return (
<BrowserRouter>
<StyleRoot>
<div className="App">
<Route path='/' exact component={Navbar} />
<Route path='/' exact component={Dashboard} />
<Route path='/signin' component={Signin} />
<Switch>
<Route path='/dashboard' component={Dashboard} />
<Route path='/item' component={Item} />
<Route path='/profile' component={Profile} />
</Switch>
</div>
</StyleRoot>
</BrowserRouter>
);
}
export default App;
how i fix this

How to create independent pages via react router?

I came from Angular framework to React and I got confused with router library. I'm trying to create Login page as a separate page in my app which is should contain Navigation and Footer which is part of Main.
I added this code to solve it but run into trouble.
//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter, Route} from 'react-router-dom';
import './index.css';
import App from './App';
import Login from './containers/Login';
ReactDOM.render(
<BrowserRouter>
<Route path="/">
<App />
</Route>
<Route path="/login">
<Login />
</Route>
</BrowserRouter>
, document.getElementById('root'));
//app.js
class App extends React.Component {
render() {
return (
<Router>
<div className="App">
<Navbar />
<Switch>
<Route path="/">
<Redirect to="/dashboard" />
</Route>
<Route path="/dashboard">
<Dashboard />
</Route>
<Route path="/admin">
<Admin />
</Route>
</Switch>
<Footer />
</div>
</Router>
);
}
}
I'm using react-router-dom library.
So the main idea is I desire to load /login page without Navbar and Footer but for other pages in my app like Admin, Dashboard I want them to load with Navbar and Footer (I don't want use conditional rendering here).
But now when I go to /login page I see Navbar and Footer, also I can't go to dashboard.

Please try this.
//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter, Route, Switch} from 'react-router-dom';
import './index.css';
import App from './App';
import Login from './containers/Login';
ReactDOM.render(
<BrowserRouter>
<Switch>
<Route path="/login">
<Login />
</Route>
<Route path="/">
<App />
</Route>
</Switch>
</BrowserRouter>
, document.getElementById('root'));
//app.js
class App extends React.Component {
render() {
return (
<Router>
<div className="App">
<Navbar />
<Switch>
<Route path="/dashboard">
<Dashboard />
</Route>
<Route path="/admin">
<Admin />
</Route>
<Route exact path="/">
<Redirect to="/dashboard" />
</Route>
</Switch>
<Footer />
</div>
</Router>
);
}
}

Add the exact property to the route element

In my experience, it is the best practice to place the root path('/') with ëxact props at the later route just before NotFoundPage.
I think it is the same as in Angular router.

ReactJS: Target container is not a dom element (non-HTML)

I am having problems with My ReactJS code, and it keeps telling me that the target container is not a DOM element, no matter how many times I rearrange the code. It does NOT involve HTML and I really don't know whats causing this error. Any help? What even is a target container?
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import registerServiceWorker from './registerServiceWorker';
import Home from "./components/Home";
import login from "./components/login"
import Header from "./components/Header";
//import PageAccount from './components/PageAccount';
import PageBlog from './components/PageBlog';
import PageBlogCreate from './components/PageBlogCreate';
import PageSearch from "./components/PageSearch";
//import PageLogin from './components/PageLogin';
import PageError from './components/PageError';
import {BrowserRouter} from "react-router-dom";
import {Switch} from "react-router-dom";
import {Route} from "react-router-dom";
import "./sass/index.css";
import App from "./App";
import ContextHandler from "./ContextHandler"
ReactDOM.render((
/*
<BrowserRouter>
<div>
<Switch>
<Route path="/" exact component={Home}/>
{ /*<Route path="/about" exact component={About}/>
<Route path="/news" exact component={News}/>
<Route path="/login" exact component={Login}/>
<Route path="/search" exact component={Search}/> }
<Route path="/" exact component={Header}/>
{ /*<Route path="/account" exact component={PageAccount}/>
<Route path="/blog" exact component={PageBlog}/>
<Route path="/blog/create" exact component={PageCreateBlog}/>}
<Route path="/search" exact component={PageSearch}/>
{/*<Route path="/login" exact component={PageLogin}/>
<Route path="*" component={PageError}/>}
<Route path="/search" exact component={PageSearch}/>
<Route path="/login" exact component={login}/>
{ <Route path="*" component={PageError}/> }
</Switch>
</div>
</BrowserRouter>
*/
//),
<ContextHandler>
<App />
</ContextHandler>
,
ReactDOM.render(<App />, document.getElementById('root'))));
registerServiceWorker();

Try this:
ReactDOM.render(
<ContextHandler>
<App />
</ContextHandler>,
document.getElementById('root')
)
And make sure your index.html contains a <div id="root"></div>.

You can't have nested ReactDOM.render calls like that

React-router v4. How to navigate between routes?

Routing doesnt work.
It renders only first component Cloud on /, but when I add other routes in doesn`t work
import React from 'react';
import {render} from 'react-dom';
import { BrowserRouter as Router, Route } from 'react-router-dom'
import createBrowserHistory from 'history/createBrowserHistory';
// import components
import Cloud from './components/Cloud';
import Dashboard from './components/Dashboard';
import Contacts from './components/Contacts';
import Account from './components/Account';
import Login from './components/Login';
import Sidebar from './components/Sidebar';
import Header from './components/Header';
import Footer from './components/Footer';
const history = createBrowserHistory();
const App = (props) => {
return (
<Router history={history}>
<section>
<Sidebar/>
<div className="main-content">
<Header/>
<div id="page-wrapper">
<Route exact path="/" component={Cloud}/>
<Route path="/dashboard" component={Dashboard}/>
<Route path="/contacts" component={Contacts}/>
<Route path="/account" component={Account}/>
</div>
</div>
<Footer/>
</section>
</Router>
);
};
render(<App/>, document.getElementById('root'));
What am I doing wrong ?
screenshot and screenshot2
And how to jump between /home and /login routes if user cookies expired ?

Just put a / in front of your paths, i.e,
<Route exact path="/" component={Cloud}/>
<Route path="/dashboard" component={Dashboard}/>
<Route path="/contacts" component={Contacts}/>
<Route path="/account" component={Account}/>