reactjs - 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 (我不知道为什么它试图加载这个文件)我猜这是来自react-router-dom的东西我试图用谷歌搜索它但我没有找到任何相关的东西......不能把我的手指放在我的东西上我完全失踪了。

谢谢。

Answer 1

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

对应于您的开发服务器输出公共(public)路径(默认为/)，您应该能够下载main.js具有以下 URL:http://localhost:3000/main.js ，但你有http://localhost:3000/users/main.js 。这是因为您指定了 src='main.js'对于 <script>在你的html文件中，这是一个相对路径。服务器获取当前 URL 路径 ( http://localhost:3000/users/ ) 并将其与 main.js 连接起来。我们有http://localhost:3000/users/main.js .

您只需设置您的 <script> src具有绝对路径的属性: src="/main.js" .