react-router-dom BrowserRouter在构建后无法正常工作

Question

This is the first time I tried react. I create a project using create-react-app , then for routing, I use React Router V4 for web react-router-dom .

This is my index.js file

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import App from './App';
import './index.css';

ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.getElementById('root')
);

There's no problem when I start the server with npm start . But when I build the app with npm run build , putting it in my www folder in my Apache server and access it, I only get empty page with <!-- react-empty: 1 --> inside my root div .

<div id="root">
  <!-- react-empty: 1 -->
</div>

I have tried looking for similar cases, but the answer always about adding historyApiFallback in webpack.config.js or gulp, which I can't find anywhere in the create-react-app template.

I have tried HashRouter , it's working fine, but there's /#/ in the url which is undesirable.

How can I get the BrowserRouter to work after I build the app?

Answer 1

Well, there was no problem at all. It worked, even if it was built using npm run build . My best guess is: you placed the files in the wrong folder.

When you build your code using npm run build , the static folder should be placed inside the MallApp folder. So your folder structure should be like this:

/var/www/mywebfolder/index.html
/var/www/mywebfolder/MallApp/static

Check your browser's console, I believe it contains errors. Failed to get the js and css files.