Topic: I can't use React Router with SideNavCat and if else show hide SideNavCat

công võ free asked 6 years ago


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.

 


Anna Morawska staff answered 6 years ago


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


công võ free answered 6 years ago


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>

 


Anna Morawska staff answered 6 years ago


Hi there, 

SideNavCat doesn't use React-Router internally as SideNavLink, so when you pass to it href attribute it works as regular anchor tag, with page reload. 
 
Best,
Ania


Please insert min. 20 characters.

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: 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