我搜索了不同的教程和多个stackOverflow问题。这些都没有帮助我解决一个非常基本的问题:使用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;
ParentComponent.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>;
}
但是,当我尝试访问嵌套组件时,仍然会出现空白屏幕...
您有此问题:
React-router urls don't work when refreshing or writing manually
最简单的解决方法是用HashRouter替换BrowserRouter