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

看起来有一个带有 react-responsive-animate-navbar 的打开的 issue，其中导航不起作用并通过向 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 元素。这意味着如果您为组件 prop 提供内联函数，您将在每次渲染时创建一个新组件。这会导致卸载现有组件并安装新组件，而不仅仅是更新现有组件。使用内联函数进行内联渲染时，请使用 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>

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

2 个答案: