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;

CodePudding user response：

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).

CodePudding user response：

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>

CodePudding user response：

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.

CodePudding user response：

Can I see your CSS file for the navbar? Maybe that caused the problem.