相关疑难解决方法(0)

我正在将反应路由器添加到现有项目中.

目前,模型被传递到根组件,该根组件包含用于子导航的导航组件和主组件.

我发现反应路由器的例子只有一个子组件,多个子组件改变的最佳方法是什么,而不重复两者中的布局代码？

我在更改视图以响应路由时遇到问题.似乎我已经尝试了所有我可以谷歌没有运气.我只想显示用户列表,点击每个用户应导航到详细信息页面.这是路由器:

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from 'react-router-dom';
import Users from "./components/Users";
import { Router, Route } from "react-router";
import Details from "./components/Details";

ReactDOM.render((
  <BrowserRouter>
    <div>
        <Route path="/" component={Users} />
        <Route path="/details" component={Details} />
    </div>
  </BrowserRouter>
), document.getElementById('app'))

当我使用网址/详细信息时,我的浏览器会导航到该网址,但不会更改视图.任何其他路线抛出404所以它似乎识别路线但不更新.

我真的没有得到反应路由器中的路由中渲染和组件道具之间的区别,在文档中它表示渲染不会创建新元素但组件确实如此,我试图回溯历史但我发现当我调用componentWillMount时在Route中使用render,它们是什么意思"如果你为组件属性提供内联函数,你将在每次渲染时创建一个新组件.这会导致现有组件卸载和新组件安装,而不仅仅是更新现有组件".

我在编写代码来呈现没有导航栏和侧边栏的登录页面时遇到问题。我遇到过一些提出类似问题的页面，但似乎都不适合我目前的情况。

如何在 React Router 的登录页面中隐藏导航栏 给出的示例很棒，但我相信完成相同任务的方式已经随着 React-router-dom v6 的改变而改变，这让我在https://dev.to/中阅读了有关此更改的信息iamandrewluca/private-route-in-react-router-v6-lg5

看来我不理解有关 React Router 路由的某些方面。在下面的代码中我有两条路线。我希望在没有导航栏和侧栏组件的情况下渲染路线之一（登录）。

const App = () => {
  return (
    <>
      <Routes>
        <Route path="/login" element={<LoginPage />} />
      </Routes>

      <NavBar />
      <SideBar />
      <main className={styles["main--container"]}>
        <div className={styles["main--content"]}>
          <Routes>
            <Route path="/" element={<Dashboard />} />
          </Routes>
        </div>
      </main>
    </>
  );
};

我也尝试过的另一种选择是将导航栏和侧栏标签移到仪表板组件中，但随后我基本上必须对任何新组件进行相同的复制和粘贴。这种方法感觉错误且效率低下，但如果这是正确的方法，我会做必要的事情

编辑：我认为重要的是包括它当前所做的事情是加载包含导航栏和侧边栏的登录页面。导航到仪表板组件有导航栏和侧边栏，但这是有意的。我想要的是登录页面没有导航栏和侧边栏

我正在做的项目有点敏感，但这是我可以向大家展示的。

当我单击 NavBar 中的 s 之一时，它会更改 URL，但不会将视图更改为正确的组件。有谁知道为什么？如果有更好的方法可以表达或提高我的 questin 的质量，请告诉我。

我返回的渲染

<NavBar />
<BrowserRouter>
  <div>
    <Switch>
      <Route path="/propertytypes" component={PropertyTypes} />
      <Route path="/entitytypes" component={EntityTypes} />
      <Route path="/associationtypes" component={AssociationTypes} />
      <Route path={Routes.ROOT} component={Test} />
    </Switch>
  </div>
</BrowserRouter>

我的导航栏

import React, { Component } from "react";
import { Link } from "react-router-dom";

class NavBar extends Component {
  render() {
    return (
      <div>
        <ul>
          <li>
            <Link to="/propertytypes">Props!</Link>
          </li>
          <li>
            <Link to="/entitytypes">Ent!</Link>
          </li>
          <li>
            <Link to="/associationtypes">Ass!</Link>
          </li>
        </ul>
      </div>
    );
  }
}

export default NavBar;

点击道具链接后