React-Router-DOM 實際上沒有創建路由？

Question

我按照教程在一個簡單的 create-react-app 上設置Auth0 。 到目前為止，我在項目中唯一擁有的是身份驗證和路由。 在localhost 中開發時，該應用程序運行良好：

• / 路由到/home ，並顯示當前登錄狀態
• /home 路由到/home , ^
• /callback 由身份驗證服務調用，路由良好並處理身份驗證並重定向到登錄頁面。

正如我所提到的，所有這些路由在開發中都運行良好。 我能夠看到登錄頁面，按登錄，使用憑據登錄，通過/callback重新路由回主頁，並查看僅在您登錄時可用的材料。然后我能夠注銷並再次正確路由回來到登錄頁面。

我將該應用程序部署到了一個網站 ( https://dashboard.xxxxx.com )，但除了 / 之外，沒有任何路由可以工作。 所以https://dashboard.xxxxx.com有效，但找不到https://dashboard.xxxxx.com/home和https://dashboard.xxxxx.com/callback 。

這會導致auth0服務無法登錄，因為它重定向到https://dashboard.xxxxx.com/callback但該頁面不存在。

我開始只使用帶有路由的react-router-dom ，然后我嘗試使用帶有交換機和路由的路由器。 然后我嘗試了BrowserRouter和HashRouter ，但都沒有奏效。 我當前的代碼如下：

    <HashRouter history={history} component={Home}>
        <Switch>
            <Route exact path='/' render={(props) => <Home auth={auth} {...props}/>}/>
            <Route exact path='/home' render={(props) => <Home auth={auth} {...props}/>}/>
            <Route exact path='/callback' render={(props) => {
                handleAuth(props);
                return <Callback {...props}/>
            }}/>
        </Switch>
    </HashRouter>

Answer 1

發生這種情況是因為您沒有將所有請求從用於初始化您的應用程序的服務器重定向到index.html 。 您需要將所有調用從服務器端重定向到 index.html 可能位於.htaccess文件、節點或您將使用的任何其他框架中。

如果您正在使用 Create-react-app 或任何其他方式，則本地重定向到index.html由 Create-react-app 處理。