Topic: I can't use React Router with SideNavCat and if else show hide SideNavCat
I can't use React Router with SideNavCat by params href, it make redirect page, I used ok with <Link to="">
<SideNav triggerOpening="true" breakWidth="768" className="deep-purple darken-4">
<SideNavNav>
<li><Link to="/">Dashboard</Link></li>
<li><Link to="/patient/appointment/register">Đăng ký khám bệnh</Link></li>
{ this.state.role === 'admin' &&
<li><Link to="/user">Quản lý user</Link></li>
}
<SideNavCat id="instruction-cat" name="Đăng ký khám bệnh" icon="hand-pointer-o" href="/patient/appointment/register">
<SideNavLink>For bloggers</SideNavLink>
<SideNavLink>For authors</SideNavLink>
</SideNavCat>
</SideNavNav>
</SideNav>
and I can't use "if else" by { this.state.role && ... }, it appear error
Uncaught TypeError: Cannot read property 'type' of null
at app.js:120348
at mapSingleChildIntoContext (app.js:50638)
at traverseAllChildrenImpl (app.js:50511)
at traverseAllChildrenImpl (app.js:50527)
at traverseAllChildren (app.js:50582)
at mapIntoWithKeyPrefixInternal (app.js:50660)
at Object.mapChildren [as map] (app.js:50682)
at t.value (app.js:120347)
at finishClassComponent (app.js:96945)
at updateClassComponent (app.js:96908)
app.js:98393 The above error occurred in the <t> component:
in t (created by Header)
in ul (created by t)
in div (created by t)
in Transition (created by CSSTransition)
in CSSTransition (created by t)
in div (created by t)
in t (created by Header)
in div (created by Header)
in Header (created by Connect(Header))
in Connect(Header) (created by MainLayout)
in div (created by MainLayout)
in MainLayout
in Switch
in Router
in Provider
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
Hi there,
It's because SideNavNav expects SideNavCat as a child component. You can achieve the same effect using our components like this:
import React from "react";
import { BrowserRouter as Router } from "react-router-dom";
import {
SideNavCat,
SideNavNav,
SideNav,
SideNavLink,
Container,
} from "mdbreact";
class App extends React.Component {
state = {
role: "admin"
}
render() {
return (
<Router>
<Container>
<SideNav
logo="https://mdbootstrap.com/img/logo/mdb-transparent.png"
hidden
fixed
breakWidth={1300}
className="deep-purple darken-4"
>
<SideNavNav>
<SideNavCat
name="Submit blog"
id="submit-blog"
icon="chevron-right"
>
{this.state.role === 'admin' &&
<SideNavLink to="/user">Quản lý user</SideNavLink>}
<SideNavLink>Registration form</SideNavLink>
</SideNavCat>
</SideNavNav>
</SideNav>
</Container>
</Router>
);
}
}
export default App;
Best,
Ania
Hi,
Thanks for your answer. I got it.
And please check why error appear when I code like this
<SideNav triggerOpening="true" breakWidth="768" className="deep-purple darken-4">
<SideNavNav>
{ this.state.role === 'admin' &&
<li><Link to="/user">Quản lý user</Link></li>
}
</SideNavNav>
</SideNav>
Hi there,
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: MDB React
- MDB Version: 4.7.1
- Device: PC
- Browser: chrome
- OS: window 10
- Provided sample code: Yes
- Provided link: No