对子路径的直接访问

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路由器的东西，我试图搜索它，但是我没有找到任何相关的东西……我不能把我的手指放在我所缺少的东西上。

谢谢。

Answer 1

好的，您的页面是空的，因为它不能下载您的main.js文件来初始化您的React应用程序。

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

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