React Router - URL 更改但不是组件

Question

我遇到了 React Router 的问题，当我运行应用程序时，主页显示但其他页面不呈现，我正在使用一些名为 react-responsive-animate-navbar 的导航栏库，即导航栏工作正常，当我单击时 URL 发生更改，但我为路径/url 指定的组件未呈现。我尝试了几个在 stackoverflow 和 github 上找到的解决方案，但都没有奏效。

代码：

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>
   );
};

导航栏

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;

更新：

我发现当我更改 url 并刷新页面时，会呈现页面，否则点击时什么都没有发生，并且 url 只是在改变。 我怎样才能让它在不需要刷新的情况下渲染？

提前谢谢大家！

Answer 1

看起来有一个打开的issue 和react-responsive-animate-navbar，其中导航不起作用，并通过向menu 数组添加一个组件字段来修复，如下所示：

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

但是这个修复还不是published to npm，所以你仍然有错误的代码没有上面提到的fix。我建议您制作自己的自定义 ReactNavBar 组件，因为它的代码不多，而且“react-responsive-animate-navbar”库看起来维护得不好。

我制作了一个小的codepen，我在其中复制/粘贴/安装了您开始制作自己的自定义“react-responsive-animate-navbar”所需的东西。全部在ReactNavBar 文件夹中。

Answer 2

我不确定这是不是解决方法，但如果您要使用箭头函数来呈现组件，您需要将 component 属性更改为 render。

当你使用组件（而不是渲染或子组件，如下）时，路由器使用 React.createElement 从给定组件创建一个新的 React 元素。这意味着如果您为组件属性提供内联函数，您将在每次渲染时创建一个新组件。这会导致现有组件卸载和新组件安装，而不是仅更新现有组件。使用内联函数进行内联渲染时，请使用 render 或 children 道具（如下）。

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

您可能希望在根路径中更改该功能。

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