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

好的，您的頁面是空白的，因為它無法下載初始化您的React應用程序的main.js文件。

對應於您的dev服務器輸出 - 公共路徑（默認情況下為/ ），您應該能夠使用以下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" 。