CODEWITHSUNDEEP
javascriptnode.jsreactjsreact-routerreact-router-dom
stupidwebsite
stupidwebsite

Reputation: 25

React blank page after running npm run build because of react-router-dom

Here is my code for the index.js page: 

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter as Router, Route, Switch} from "react-router-dom"
import './css/bootstrap.min.css';
import './css/style.css';

// Pages
import Library from './pages/Library.js'
import Register from './pages/Register.js'

ReactDOM.render(
  <div>
    <Router>
      <Switch>
        <Route exact path="/" component={Library}/>
        <Route exact path="/library" component={Library}/>
        <Route exact path="/register" component={Register}/>
      </Switch>
    </Router>
  </div>,
  document.getElementById('root')
)

When I run npm start I get the application as desired. localhost:3000 and localhost:3000/library render the Library component, while localhost:3000/register renders the Register component.

When I run npm run build I get the build folder but when I enter the index.html page, it is blank.

This problem was introduced after I implemented the router. Previously the result of both npm start and npm run build were the same.

Upvotes: 3

Views: 3419

Answers (1)

Muhammad Danial Iqbal
Muhammad Danial Iqbal

Reputation: 1786

Here is the link to the same issue you are facing on the official create-react-app github issues

It is marked as closed there, you can also read that for more info.

You should serve the build folder for example like 

npx serve -s build

Upvotes: 3

Related Questions