React-Router-Dom直接访问儿童路径

Question

我在我的主组件集中有我的主要路由

<Main>
    <Switch>
        <Route exact path="/login" component={ LoginPage }/>
        <PrivateRoute path="/" component={ PrivatePages }/>
    </Switch>
</Main>

和在PrivatePages内部设置的路线如下

<div>
    <Switch>
        <Route exact path="/users/:id" component={ UsersPage }/>
    </Switch>
</div>

当我像http：//localhost：3000/用户访问它时，我看到了右页（userspage component），当我单击用户时，它会转移到http：//localhost：3000/users/someuserId（我是通过使用<Link>进行的），并且它可以很好地工作。但是，当我刷新或试图直接富含特定用户页面时，我会得到一个空白页，该空白页试图加载 http://localhost:3000/users/main.js（我不知道为什么要尝试使用它加载此文件）我猜这是我尝试使用Google Google的React-Router-dom，但我没有发现任何相关的东西...无法将手指放在我所缺少的东西上。

谢谢。

Answer 1

好吧，您的页面是空白的，因为它无法下载您的main.js文件，该文件初始化了您的React应用程序。

与您的Dev Server Output-Public-Path相对应（默认情况下是/），您应该能够使用以下URL下载main.js：http://localhost:3000/main.js，但是您有http://localhost:3000/users/main.js。这是因为您在HTML文件中为<script>指定了src='main.js'，这是相对路径。服务器采用当前URL路径（http://localhost:3000/users/），并将其与main.js相连。我们有http://localhost:3000/users/main.js。

您只需要使用绝对路径设置<script> src属性： src="/main.js"。