Topic: MDB React not rendering content

mrrharris priority asked 2 years ago

I am expecting to see the content in the page but not seeing any content and not getting any errors. I am using react-router v6.

import React from 'react'; import { Routes, Route, Outlet, Link } from "react-router-dom"; import { MDBContainer, MDBNavbar, MDBNavbarBrand, MDBNavbarToggler, MDBIcon, MDBNavbarNav, MDBNavbarItem, MDBNavbarLink, MDBBtn, MDBDropdown, MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem, MDBDropdownLink, MDBCollapse } from 'mdb-react-ui-kit'; /*function App() { return ( https://mdbootstrap.com/img/logo/mdb-transparent-250px.png' style={{ width: 250, height: 90 }} /> Thank you for using our product. We're glad you're with us. MDB Team

https://mdbootstrap.com/docs/standard/getting-started/' target='_blank' role='button' > Start MDB tutorial ); }

export default App;*/ export default function App() { return (

Basic Example

  <p>
    This example demonstrates some of the core features of React Router
    including nested <code>&lt;Route&gt;</code>s,{" "}
    <code>&lt;Outlet&gt;</code>s, <code>&lt;Link&gt;</code>s, and using a
    "*" route (aka "splat route") to render a "not found" page when someone
    visits an unrecognized URL.
  </p>

  {/* Routes nest inside one another. Nested route paths build upon
        parent route paths, and nested route elements render inside
        parent route elements. See the note about <Outlet> below. */}
  <Routes>
    <Route path="/" element={<Layout />}>
      <Route index element={<Home />} />
      <Route path="about" element={<About />} />
      <Route path="dashboard" element={<Dashboard />} />

      {/* Using path="*"" means "match anything", so this route
            acts like a catch-all for URLs that we don't have explicit
            routes for. */}
      <Route path="*" element={<NoMatch />} />
    </Route>
  </Routes>
</div>

); }

function Layout() { return (

{/* A "layout route" is a good place to put markup you want to // share across all the pages on your site, like navigation. */}

  <MDBNavbar expand='lg' light bgColor='light'>
  <MDBContainer fluid>
    <MDBNavbarBrand href='#'>Brand</MDBNavbarBrand>

    <MDBNavbarToggler
      aria-controls='navbarSupportedContent'
      aria-expanded='false'
      aria-label='Toggle navigation'
      onClick={() => setShowBasic(!showBasic)}
    >
      <MDBIcon icon='bars' fas />
    </MDBNavbarToggler>

    <MDBCollapse navbar show={showBasic}>
      <MDBNavbarNav className='mr-auto mb-2 mb-lg-0'>
        <MDBNavbarItem>
          <MDBNavbarLink active aria-current='page' href='#'>
            Home
          </MDBNavbarLink>
        </MDBNavbarItem>
        <MDBNavbarItem>
          <MDBNavbarLink href='#'>Link</MDBNavbarLink>
        </MDBNavbarItem>

        <MDBNavbarItem>
          <MDBDropdown>
            <MDBDropdownToggle tag='a' className='nav-link'>
              Dropdown
            </MDBDropdownToggle>
            <MDBDropdownMenu>
              <MDBDropdownItem>
                <MDBDropdownLink>Action</MDBDropdownLink>
              </MDBDropdownItem>
              <MDBDropdownItem>
                <MDBDropdownLink>Another action</MDBDropdownLink>
              </MDBDropdownItem>
              <MDBDropdownItem>
                <MDBDropdownLink>Something else here</MDBDropdownLink>
              </MDBDropdownItem>
            </MDBDropdownMenu>
          </MDBDropdown>
        </MDBNavbarItem>

        <MDBNavbarItem>
          <MDBNavbarLink disabled href='#' tabIndex={-1} aria-disabled='true'>
            Disabled
          </MDBNavbarLink>
        </MDBNavbarItem>
      </MDBNavbarNav>

      <form className='d-flex input-group w-auto'>
        <input type='search' className='form-control' placeholder='Type query' aria-label='Search' />
        <MDBBtn color='primary'>Search</MDBBtn>
      </form>
    </MDBCollapse>
  </MDBContainer>
</MDBNavbar>


  {/* An <Outlet> renders whatever child route is currently active,
     // so you can think about this <Outlet> as a placeholder for
     // the child routes we defined above. */}
  <Outlet />
  </div>

); }

function Home() { return ( col="4" col="4" col="4" sm="4" sm="4" sm="4" md="4" md="4" md="4" lg="4" lg="4" lg="4" xl="4" xl="4" xl="4" ); }

function About() { return (

About

); }

function Dashboard() { return (

Dashboard

); }

function NoMatch() { return (

Nothing to see here!

Go to the home page

); }

Add comment

mrrharris priority answered 2 years ago

0 0 Best answer

Hi! The error that I am getting is BrowserRouter is not defined.

Krzysztof Wilk staff commented 2 years ago

Hi!

Could you make a simple GitHub repository with your code? According to the example above you are returning nothing from the component, the code is not formatted and I see you have even more components, so it is hard to say something without it :(

Add comment

mrrharris priority answered 2 years ago

0 0 Best answer

Hi Krzysztof,
Thanks! I have made all of the suggested fixes and my code ran but now after adding the routes the page renders but is blank. No errors. I am new to React so forgive me. I initially saw the header/nav but made a few changes and now I cannot see anything.

Here is App.jsx:

import * as React from 'react';
import Navigation from "./components/navigation";
import Footer from "./components/footer";
import './App.css';

export default function App() {
 return (

);

}

index.jsx:

/* eslint-disable */
import * as React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Routes, Route, Outlet, Link, } from "react-router-dom";
import App from './App';
import Navigation from "./components/navigation";
import Footer from "./components/footer";
import About from "./components/about";
import Contact from "./components/contact";
import Fade from "./components/fade";
import Wine from "./components/wine";
import Wsgr from './components/wsgr';
import Home from './components/home';
import 'mdb-react-ui-kit/dist/css/mdb.min.css';
import './index.css';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
 ,
 
 
 
 }>
 } />
 } />
 } />
 } />
 } />
 } />
 
 
 
 ,
document.getElementById("root")
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: <a href="https://bit.ly/CRA-vitals" target="_blank" rel="nofollow">https://bit.ly/CRA-vitals</a>
reportWebVitals();

Please advise.

Please insert min. 20 characters.

Hi Krzysztof, Thanks! I have made all of the suggested fixes and my code ran but now after adding the routes the page renders but is blank. No errors. I am new to React so forgive me. I initially saw the header/nav but made a few changes and now I cannot see anything.

Here is App.jsx:

import * as React from 'react'; import Navigation from "./components/navigation"; import Footer from "./components/footer"; import './App.css';

export default function App() { return (

);

}

index.jsx:

/* eslint-disable */ import * as React from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter as Router, Routes, Route, Outlet, Link, } from "react-router-dom"; import App from './App'; import Navigation from "./components/navigation"; import Footer from "./components/footer"; import About from "./components/about"; import Contact from "./components/contact"; import Fade from "./components/fade"; import Wine from "./components/wine"; import Wsgr from './components/wsgr'; import Home from './components/home'; import 'mdb-react-ui-kit/dist/css/mdb.min.css'; import './index.css'; import reportWebVitals from './reportWebVitals';

ReactDOM.render( , }> } /> } /> } /> } /> } /> } /> , document.getElementById("root") ); // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals reportWebVitals();

Please advise.

Add comment

Krzysztof Wilk staff answered 2 years ago

0 0 Best answer

Hi!

There's no problem with our package. The problem is with the example you got. Your routes aren't wrapped with the <code>BrowserRouter</code> component. I assume you got your code from here: <a href="https://stackblitz.com/github/remix-run/react-router/tree/main/examples/basic?file=src%2FApp.tsx" target="_blank" rel="nofollow">https://stackblitz.com/github/remix-run/react-router/tree/main/examples/basic?file=src%2FApp.tsx</a>. As you can see in the <code>main.tsx</code> the whole App is wrapped in <code>BrowserRouter</code>. So you can try wrapping routes as it is in code example or just do it like this:

and import this router from the package:

<pre class="prettyprint"><code> import {
 Routes,
 BrowserRouter as Router,
 Route,
 Outlet,
 Link,
} from "react-router-dom";
</code></pre>

Everything should work fine now :)

Keep coding!

Please insert min. 20 characters.

Hi!

There's no problem with our package. The problem is with the example you got. Your routes aren't wrapped with the BrowserRouter component. I assume you got your code from here: https://stackblitz.com/github/remix-run/react-router/tree/main/examples/basic?file=src%2FApp.tsx. As you can see in the main.tsx the whole App is wrapped in BrowserRouter. So you can try wrapping routes as it is in code example or just do it like this:

   <Router>
    <Routes>
      <Route path="/" element={<Layout />}>
        <Route index element={<Home />} />
        <Route path="about" element={<About />} />
        <Route path="dashboard" element={<Dashboard />} />

        <Route path="*" element={<NoMatch />} />
      </Route>
    </Routes>
  </Router>

and import this router from the package:

 import {
  Routes,
  BrowserRouter as Router,
  Route,
  Outlet,
  Link,
} from "react-router-dom";

Everything should work fine now :)

Keep coding!

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Priority
Premium support: Yes
Technology: MDB React
MDB Version: MDB5 1.5.0
Device: MacBook Pro
Browser: Chrome
OS: 12.2.1 Monterey
Provided sample code: No
Provided link: No

mrrharris

45Support score
5Questions 2Answers 1Snippets