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><Route></code>s,{" "}
<code><Outlet></code>s, <code><Link></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
); }mrrharris priority answered 2 years ago
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 :(
mrrharris priority answered 2 years ago
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.
Krzysztof Wilk staff answered 2 years ago
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!
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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