Components in react are not rendering

Question

I am currently working on my navbar for my dashboard and encountered a problem when my navbar components are all defined but not rendering on the screen. I also used nested routes in index.js but that also didn't work for me. Can anybody guide me and solve this error, this has frustrated me for some days.

Here is my index.js :

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route, Redirect, Switch } from 'react-router-dom';
import App from './App.jsx';
import Login from './screens/Login.jsx';
import Register from './screens/Register.jsx';
import Activate from './screens/Activate.jsx';
import Private from './screens/Private.jsx';
import Admin from './screens/Admin.jsx';
import Usage from './screens/Usage.jsx';
import Invoices from './screens/Invoices.jsx';
import Documentation from './screens/Documentation.jsx';
import Plan from './screens/Plan.jsx';
import ForgetPassword from './screens/ForgetPassword.jsx';
import ResetPassword from './screens/ResetPassword.jsx';
import PrivateRoute from './Routes/PrivateRoute';
import AdminRoute from './Routes/AdminRoute';
import 'react-toastify/dist/ReactToastify.css';
ReactDOM.render(
  <BrowserRouter>
    <Switch>
      <Route path='/' exact render={props => <App {...props} />} >
      <Route path = '/plan' exact element = {<Plan/>}/>
      <Route path = '/usage' exact element = {<Usage/>}/>
      <Route path = '/documentation' exact element = {<Documentation/>}/>
      <Route path = '/invoices' exact element = {<Invoices/>}/>
      </Route>
      <Route path='/login' exact render={props => <Login {...props} />} />
      <Route path='/register' exact render={props => <Register {...props} />} />
      <Route path='/users/password/forget' exact render={props => <ForgetPassword {...props} />} />
      <Route path='/users/password/reset/:token' exact render={props => <ResetPassword {...props} />} />
      <Route path='/users/activate/:token' exact render={props => <Activate {...props} />} />
      <PrivateRoute path="/private" exact component={Private} />
       <AdminRoute path="/admin" exact component={Admin} />
      <Redirect to='/' />
    </Switch>
  </BrowserRouter>,
  document.getElementById('root')
);

Here is my app.jsx:

import "./App.module.scss";
import React,{ useState } from "react";
import {  Route,Redirect,Switch } from "react-router-dom";
import { isAuth } from "./helpers/auth";
import Navbar from "./components/Navbar/Navbar";
import Container from "./components/Container/Container";
import RightNavbar from "./components/RightNavbar/RightNavbar";
import Dashboard from './screens/Dashboard';
import Usage from './screens/Usage';
import Plan from './screens/Plan';
import Invoices from './screens/Invoices';
import Documentation from './screens/Documentation';


import NavContext from "./context/NavContext";
function App() {
  const [nav, setNav] = useState(false);
  const value = { nav, setNav };

  return (
    <div className="App">
      {isAuth() ? null : <Redirect to = '/login'/>}
      <NavContext.Provider value={value}>
        <Navbar />
        <Container
          stickyNav={<RightNavbar />}
          content={
            <Switch>
              <Route path="*" element={<main>NOT FOUND</main>} />
              <Route path="/" element={<Dashboard/>} />
              <Route path="/usage" element={<Usage/>} />
              <Route path="/plan" element={<Plan/>} />
              <Route path="/documentation" element={<Documentation/>} />
              <Route path="/invoices" element={<Invoices/>} />
            </Switch>
          }
        />
      </NavContext.Provider>
    </div>
  );
}

export default App;

please show code on this path 'Public/index.html'

Arash Ghazi
– Arash Ghazi

2022-03-06 09:04:01 +00:00
Commented Mar 6, 2022 at 9:04 — Arash Ghazi
– Arash Ghazi, Commented Mar 6, 2022 at 9:04
pastebin.com/Wixr8ip7

Darshan
– Darshan

2022-03-06 09:13:31 +00:00
Commented Mar 6, 2022 at 9:13 — Darshan
– Darshan, Commented Mar 6, 2022 at 9:13
I saw that it is no problem that I think

Arash Ghazi
– Arash Ghazi

2022-03-06 09:26:19 +00:00
Commented Mar 6, 2022 at 9:26 — Arash Ghazi
– Arash Ghazi, Commented Mar 6, 2022 at 9:26
do you have any errors on the console?

Arash Ghazi
– Arash Ghazi

2022-03-06 09:27:26 +00:00
Commented Mar 6, 2022 at 9:27 — Arash Ghazi
– Arash Ghazi, Commented Mar 6, 2022 at 9:27
nope , there are no errors coming

Darshan
– Darshan

2022-03-06 09:27:55 +00:00
Commented Mar 6, 2022 at 9:27 — Darshan
– Darshan, Commented Mar 6, 2022 at 9:27

Umer Saleem · Accepted Answer · 2022-03-06 12:32:24Z

2

I guess the problem is in following line:

<Route path='/' exact render={props => <App {...props} />

solution: <Route path='/' render={props => <App {...props} />

Because when I removed the exact keyword. I saw a dark blue color navbar. I think that's what you wanna see.

If I failed to solve or understand your problem then please consider my apology. As I'm not an expert react js (I'm just a law student who wanna become a programmer).

answered Mar 6, 2022 at 12:32

Umer Saleem

512 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Darshan Over a year ago

Man , you did it so close . But but my components still not rendering . Basically navbar components

Darshan Over a year ago

That's dark blue color navbar is css problem bro

Arash Ghazi · Accepted Answer · 2022-03-06 13:07:46Z

1

Your Navlink is working but you put this <Redirect to='/' /> code at the end of your index component that causes to redirect to the first page. if you remove it, your problem will solve. but I prefer to use bootstrap or reactstrap

<div className="App">
      <NavContext.Provider value={value}>
        <div style={{ width: '100%', overflow: 'hidden' }}>
          <div style={{ width: '100px', float: 'left' }}>
            <Navbar />
          </div>
          <div style={{ marginLeft: '100px' }}>
            <Container
              stickyNav={<RightNavbar />}
              content={
                <Switch>
                  <Route path="/" exact component={Dashboard} />
                  <Route path="/usage" exact component={Usage} />
                  <Route path="/plan" exact component={Plan } />
                  <Route path="/documentation" exact
                  component={Documentation } />
                  <Route path="/invoices" exact component={Invoices } />
                </Switch>
              }
            />
          </div>
        </div>
      </NavContext.Provider>
    </div>

edited Mar 6, 2022 at 13:07

answered Mar 6, 2022 at 9:36

Arash Ghazi

1,01112 silver badges18 bronze badges

2 Comments

Darshan Over a year ago

Here is my git hub repo - github.com/Darshan972/UserAuth . When you run the server , open the browser in minimize screen as there is some problem in my css .

Arash Ghazi Over a year ago

Let us continue this discussion in chat.

Umer Saleem · Accepted Answer · 2022-03-06 13:26:04Z

Darshan. I found another solution for you. I notice when I use render keyword instead of an element, it renders the element in dom like usage and hello. But the problem is that it only works in the responsive components.

Solution: use render(like given below) instead of element

In App.jsx:

<Switch>
<Route path="*" render={() => <main>NOT FOUND</main>} />}
<Route path="/dashboard" exact render={() => <Dashboard />}
<Route path="/usage" render={() => <Usage />}
<Route path="/plan" render={() => <Plan />}
<Route path="/documentation" render={() => <Documentation />}
<Route path="/invoices" render={() => <Invoices />}
</Switch>

I know it will not fix the whole problem but at least it will help you a bit solve the problem.

Collectives™ on Stack Overflow

Components in react are not rendering

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related