I can't use React Router with SideNavCat and if else show hi

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

công võ free asked 5 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.

Add comment

Anna Morawska staff answered 5 years ago

0 0 Best answer

Hi there,It's because SideNavNav expects SideNavCat as a child component. You can achieve the same effect using our components  like this: <div><pre class="code-toolbar grey lighten-2 p-3 mb-3">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;</pre>Best, Ania</div>

Please insert min. 20 characters.

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

Add comment

công võ free answered 5 years ago

0 0 Best answer

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>

Add comment

Anna Morawska staff answered 5 years ago

0 0 Best answer

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

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

công võ

30Support score
2Questions 2Answers 0Snippets