React-router-dom：非常简单的嵌套路由不起作用

Posted 2023-02-21

【中文标题】React-router-dom：非常简单的嵌套路由不起作用

【英文标题】：React-router-dom: Very simple nested routing does not work

【发布时间】：2020-06-02 08:23:26

【问题描述】：

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

App.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：我已经开始了一个新项目，只是为了实现一个非常简单的嵌套路由：

App.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>
  );

nestedComponentOne.js

import React from "react";

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

nestedComponentTwo.js

import React from "react";

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

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

【参考方案1】：

你有这个问题：

React-router urls don't work when refreshing or writing manually

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