0

我搜索了不同的教程和多个 stackOverflow 问题。这些都没有帮助我解决一个非常基本的问题：
使用 react-router-dom 实现嵌套路由
这是我的代码到目前为止：

应用程序.js

  <Route exact path="/home" name="Home" component={DefaultLayout} />

DefaultLayout.js

 <Route path="/home/users" component={Users} />

当我转到/home/users时，我得到一个空白屏幕，因为 react-router-dom 正在App.js中查找该路由的定义，而不是在DefaultLayout.js中搜索它。
所以我有两个问题
： 1：我到底做错了什么？
问题 2： react-router-dom 如何知道它应该在DefaultLayout.js而不是App.js中寻找嵌套路由？

已经两天了，我仍然无法解决这个简单的问题。
很感谢任何形式的帮助。
编辑1：我开始一个新项目只是为了实现一个非常简单的嵌套路由：

应用程序.js

import React from "react";
import { BrowserRouter, Switch, Route } from "react-router-dom";

import ParentComponent from "./nestedComponents/ParentComponent";

function App() {
  return (
    <div>
      <BrowserRouter>
        <Switch>
          <Route exact path="/home" name="Home" component={ParentComponent} />
        </Switch>
      </BrowserRouter>
    </div>
  );
}

export default App;

父组件.js

import React from "react";
import nestedComponentOne from "./nestedComponentOne";
import nestedComponentTwo from "./nestedComponentTwo";
import { Switch, Route } from "react-router-dom";

export default function ParentComponent() {
  return (
    <div>
      PARENT COMPONENT
      <Switch>
        <Route path="home/nestedComponentOne" component={nestedComponentOne} />
        <Route path="home/nestedComponentTwo" component={nestedComponentTwo} />
      </Switch>
    </div>
  );
}

嵌套组件One.js

import React from "react";

export default function nestedComponentOne() {
  return <div>NESTED COMPONENT 1</div>;
}

嵌套组件二.js

import React from "react";

export default function nestedComponentTwo() {
  return <div>NESTED COMPONENT 2</div>;
}

但是，每当我尝试访问嵌套组件时，我仍然会得到一个空白屏幕......

4

1 回答 1

0

你有这个问题：

手动刷新或写入时，React-router url 不起作用

最简单的解决方法是用 HashRouter 替换 BrowserRouter

于 2020-02-20T09:43:37.790 回答