0

I have got an issue with React Router, when i am running the app the main page shows but the others not render, I am using some library for the Navigation bar that called react-responsive-animate-navbar, the Nav bar is working properly and the URL is change when i click but the component that i specify for the path/url is not render. I tried a couple of solutions that i found on stackoverflow and github and none of them work.

Code:

App.js

import React, { useState } from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import NavigationBar from "../NavigationBar/NavigationBar";
import Menu from "../Menu/Menu";
import Login from "../Login/Login";
import UpdateUser from "../UpdateUser/UpdateUser";

const App = () => {
const [token, setToken] = useState(1);

return (
    <Router>
        <NavigationBar token={token} />
        <Switch>
            <Route exact path="/" component={token >= 0 ? Menu : () => <Login token={token} setToken={setToken}/>} />
            <Route path="/update" component={() => <UpdateUser />} />
        </Switch>
    </Router>
   );
};

NavigationBar

import React from "react";
import { ReactNavbar } from "react-responsive-animate-navbar";
import "./NavigationBar.css";

const NavigationBar = ({ token }) => {
   return (
       <ReactNavbar
        color="#000"
        logo="../../styles/images/logo.png"
        menu={[
            { name: "דף הבית", to: "/" },
            { name: "מדריך", to: "/guide" },
            { name: "עדכון משתמש", to: "/update" },
            { name: "התנתק", to: "/contact" },
        ]}
    />
   );
};

export default NavigationBar;

UPDATE:

I figure out that when i change the url and refresh the page is rendered, otherwise nothing happend on clicking and the url is only changing. How can i make it render without the need to refresh ?

Thank you all in advance !

Improve this question
3
  • Doesn’t seem like your importing the actual components? You can also use the useContext hook to store the token and persist throughout your app. Then in your ternary you can simply put token and not token >= 0 that doesn’t make much sense to me. Commented Feb 27, 2021 at 1:29
  • @wjpayne83 I do, I tried to avoid adding unnecessary code. The code does not have errors or something. Commented Feb 27, 2021 at 1:31
  • Seems pretty important to your question, the first thing anyone will notice is you do not import the components. I’m just having a hard time understanding your code. Why use an arrow function in your route component? Commented Feb 27, 2021 at 1:36

2 Answers 2

Reset to default
1

Looks like there was an open issue with the react-responsive-animate-navbar where the navigation didn't work and was fixed by adding a component field to the menu array like so:

  <ReactNavbar menu={[
            { name: "HOME", to: "/", component: Home },
          ]}
    />

however this fix was not published to npm yet, so you still have the bugged code without the fix mentioned above. I recommend making your own custom ReactNavBar component since it isn't alot of code and the "react-responsive-animate-navbar" library doesn't look well maintained.

I've made a small codepen where I copy/pasted/installed things you would need to begin making your own custom "react-responsive-animate-navbar". Its all in the ReactNavBar folder.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

I took your suggestion and used another navigation bar that currently working great. Thank you very much for the detailed answer.
0

I'm not sure this is the fix but if you are going to use an arrow function to render the component you need to change the component prop to render.

When you use component (instead of render or children, below) the router uses React.createElement to create a new React element from the given component. That means if you provide an inline function to the component prop, you would create a new component every render. This results in the existing component unmounting and the new component mounting instead of just updating the existing component. When using an inline function for inline rendering, use the render or the children prop (below).

https://reactrouter.com/web/api/Route/component

You'll probably want to change up that function in root path.

        <Switch>
            <Route exact path="/" render={() => token >= 0 ? <Menu /> : <Login token={token} setToken={setToken}/>} />
            <Route path="/update" render={() => <UpdateUser />} />
        </Switch>
Improve this answer

1 Comment

@andrewgi Unfortunately does not work, in the first part I used the arrow function because I need to pass props and conditionally render, in UpdateUser its does not really matter (works the same as before). But i still need to refresh after changing path.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.