Topic: MDB React not rendering content
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
); }
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!
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.
Hi! The error that I am getting is BrowserRouter is not defined.
Krzysztof Wilk staff commented 3 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 :(
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- 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