反应路由器 - URL 更改但不是组件

Question

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 !

Answer 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.

Answer 2

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>