React-Router-DOM 实际上没有创建路由？

Question

I followed a tutorial to set up Auth0 on a simple create-react-app. The only thing I have in the project as of now is authentication and routing. When developing in localhost , the app worked fine:

• / routed to /home , and showed the current signed-in status
• /home routed to /home , ^
• /callback, called by the authentication service, routed fine and handles the authentication and redirects to a logged in page.

As I mentioned, all of this routing worked fine on development. I was able to see a login page, press login, login with credentials, get rerouted through /callback back to the homepage and see material only available if you're logged in. I was then able to log out and be routed correctly again back to the login page.

I deployed the app to a website ( https://dashboard.xxxxx.com ) but none of the routes work except /. So https://dashboard.xxxxx.com works, but https://dashboard.xxxxx.com/home nor https://dashboard.xxxxx.com/callback cannot be found.

This causes the auth0 service to fail logging in because it redirects to https://dashboard.xxxxx.com/callback but that page does not exist.

I started off using Router from react-router-dom with just Routes, then I tried Router with a Switch and Routes. I then tried BrowserRouter and then HashRouter , but none have worked. My current code is below:

    <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

This is happening because you are not redirecting all requests to index.html from server which is used to initialise your application. You need to redirect all call to index.html from server side may be in .htaccess file, node or any other framework you would be using.

Locally the redirection to index.html is handled by Create-react-app if you are using that or any other way.