javascript - Route does not work on live server but it work on localhost

Question

What is wrong with this code. It works on localhost but it doesn't work on live Apache server. I already specify the homepage on package json and also have an htaccess. It only blank on live server.

app.js:

import React from 'react'
import {
  Route,
  Switch,
  Redirect,
  BrowserRouter as Router
 } from 'react-router-dom'

import Login from './component/login/index'

function App() {
   return (
     <Router>
        <Switch>
          <Route exact path="/" component={Login} />
          <Route path='/login' component={Login} />
        </Switch>
     </Router>
  );
}

export default App;

component index.js:

import React from 'react'
export default function Login(props) {

   return (
       <div>Login</div>
   )
}

htaccess:

     Options -MultiViews
     RewriteEngine On
     RewriteCond %{REQUEST_FILENAME} !-f
     RewriteRule ^ index.html [QSA,L]

Dependencies:

 "dependencies": {
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-router-dom": "^5.0.1",
     "react-scripts": "3.0.1",
  },

标签： javascriptreactjsapache

Answer 1

试试这个.htaccess，

RewriteEngine On
RewriteCond %{REQUEST_URI} !^/index.html$
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !\.(css|gif|ico|jpg|js|png|swf|txt|svg|woff|ttf|eot)$
RewriteRule . index.html [L]