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/users 一样访问它时，我看到了正确的页面（UsersPage 组件），当我点击一个用户时，它会转移到http://localhost:3000/users/someUserId（我正在使用<Link> 进行此操作）并且它工作得很好..但是当我刷新或尝试直接丰富到特定用户的页面时，我得到一个尝试加载http://localhost:3000/users/main.js 的空白页面（我不知道为什么它试图加载这个文件）我猜这是来自反应的东西-router-dom 我试图用谷歌搜索它，但我没有找到任何相关的东西......我不能把我的手指放在我完全错过的东西上。

谢谢。

Answer 1

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

对应于您的开发服务器 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".