Topic: MDBDropDownItem clears the screen and re-renders the entire screen

David J free asked 4 years ago


Some months ago, somebody asked this question: https://mdbootstrap.com/support/react/mdbdropdownitem-what-is-the-correct-to-add-a-link-to-this-without-losing-formatting/

and the question was never answered. I am using the React Admin Pro template and the TopNavigation,js uses this code to format the 'Profile' dropdown located in the top right of the screen.

<MDBDropdownMenu right style={{ minWidth: "200px" }}>
            <MDBDropdownItem href="#!">Log Out</MDBDropdownItem>
            <MDBDropdownItem href="#!">My Account</MDBDropdownItem>
</MDBDropdownMenu>

I change the href statement to href="/pageX" and then I run the code - The screen clears and then refreshes the entire screen before pageX is displayed.

The screen should not be completely cleared and re-rendered.

That is the problem that the previous user reported 4 months ago but no answer was ever provided on how to fix this.


David J free answered 4 years ago


I found them when reviewing the code.
I have pointed to the module names and the relevant code lines above.


Konrad Stępień staff commented 4 years ago

Hi @David J,

however, could you show me a good example where these bugs are located? Because some examples may be slightly different for presentation purposes.

Regards, Konrad.


David J free answered 4 years ago


A quick review of the code and I find these additional errors.

RoutesWithNavigation - this.state = {toggle -- toggle appears to be unused.

in the return { there is - style = {{transition : all .3s)) is unused / doesn't work the prop

className = "white-skin" - is unused

In the template - the Pages link in SideNavigation looks like it has been added on later as it isn't integrated into the template in any way.

Has there been any progress on fixing the issue I reported above with the placement of the <Router> statement and getting the dropdown menu items working?


Konrad Stępień staff commented 4 years ago

Hi @David J,

Can you tell me where I can find these bugs? Link to documentation, snippets, line of code or components?

Has there been any progress on fixing the issue I reported above with the placement of the statement and getting the dropdown menu items working?

I added it to the tasks list. And work has begun on about <Router>, but we need to wait for resolving it. The work in progress.

Thank you very much for any reports. Can i help you with something else?

Best regards, Konrad.


David J free answered 4 years ago


Unfortunately moving the <Router> statement into RoutesWithNavigation introduces another problem. It fixes the dropdown menu issue but now stops assesslocation from being called with a location value so the top navbar is no longer being updated.

Can you please have somebody take a look at the soloution?

So going back to the original problem. The code you supply in the Admin Pro Template - TopNavigation.js contains this:

<MDBDropdown>
          <MDBDropdownToggle nav caret>
            <MDBIcon icon="user" />{" "}
            <span className="d-none d-md-inline">Profile</span>
          </MDBDropdownToggle>
          <MDBDropdownMenu right style={{ minWidth: "200px" }}>
            <MDBDropdownItem href="#!">Log Out</MDBDropdownItem>
            <MDBDropdownItem href="#!">My Account</MDBDropdownItem>
          </MDBDropdownMenu>
        </MDBDropdown>

If the href='#!' is changed to a valid page such as '/register'. When it runs the entire screen is cleared and re-rendered. That's is a bug and was originally reported some months ago in this ticket https://mdbootstrap.com/support/react/mdbdropdownitem-what-is-the-correct-to-add-a-link-to-this-without-losing-formatting/

If I change the code to not use href - like this: Nothing happens when I click on either of those

<MDBDropdownMenu right style={{ minWidth: "200px" }}>
            <MDBNavLink to="/register">
              <MDBDropdownItem>Register</MDBDropdownItem>
            </MDBNavLink>
            <MDBNavLink to="/login">
              <MDBDropdownItem>Login</MDBDropdownItem>
            </MDBNavLink>
          </MDBDropdownMenu>

If I move the <Router> </Router> out of TopNavigation and put them into RoutesWithNavigation, the dropdown menu item above now works. There is no clearing of the screen and the display works fine. However doing that then stops the assesslocation method from being called so it fixes one problem but introduces another.


Konrad Stępień staff commented 4 years ago

Hi @David J,

Once again, I apologize for the problems. I have noted all the problems to our list and it looks like the problems are so important that the best solution would be to re-create the template and I need to talk about it to the co-workers. If you find any problems, please write them down for me.

Of course, I will deal with this matter, but I need some time for it, but if there are further problems, I would be grateful to send them here.

It is possible that in the next few updates it will be repaired, but it will take time.

Your regards, Konrad.


David J free answered 4 years ago


I have found the defect.

The REACT Admin Pro Template has a number of defects that you might want to review and look at fixing. This particular problem is caused by there being a <Router> statement in the TopNavigation.js after the return statement.

That <Router> statement needs to be deleted along with its <\Router>and moved after the return statement in RoutesWIthNavigation.js so that it wraps - SideNavigation, TopNavigation, Routes and Copyrights.

You may also want to consider creating a dummy page that you link to in the template instead of using fake links of # throughout the entire code. No validation is done on a link to # so there is no way of knowing if the code works - or doesn't as in this case.


Konrad Stępień staff commented 4 years ago

Hi @David J

Thank you for suggestions and reporting problems. I added this for our list of issues. Sorry for problems, of course, I will take a look at this issue and generally this template. Because i see many problems with it. If this needs a more thorough repair of the component, it may take a while.

Best Konrad.


mark-steven-au premium commented 4 years ago

I have had similar problems and that is using latest React Pro so has not been corrected. So what is the proper syntax to sue as I am completely unable to get the links to work as expected. DO like the idea of having a dummy page in there instead of #!


Piotr Glejzer staff commented 4 years ago

which version do you use?


Konrad Stępień staff answered 4 years ago


Hi @David J,

Can you check this line, does it works correctly?

<MDBDropdownItem className="m-0 p-0">
    <Link to="/css" className="h-100 w-100 d-block dropdown-item">Action</Link>
</MDBDropdownItem>

But you also need to use react-router-dom in your project. Import Router and Link

Best, Konrad.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Opened

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.18.0
  • Device: Desktop
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes