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（我正在使用{{} 1}}）它工作得很好..但当我刷新或尝试直接丰富到特定用户的页面时，我得到一个空白页面，试图加载<Link>（我不知道为什么它试图加载这个文件）我想这是来自react-router-dom的东西我试图谷歌它但我没有找到任何相关的东西......不能把我的手指放在我错过的东西上。

感谢。

Answer 1

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

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

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

react-router-dom直接访问子路径

1 个答案: