React router: going direcly to child path is not working

Question

On top of my app, I have the following main router

export class App extends React.Component {

    render() {
        return (
            <div>
                <Router>
                    <Switch>
                        <Route exact path={Paths.login} component={LoginForm} />
                        <Route path={Paths.dashboard} component={Dashboard} />
                    </Switch>
                </Router>
            </div>
        )
    }

}

Further in dashboard, I have a side menu with links

export class Dashboard extends React.Component<RouteComponentProps> {

    constructor(props: RouteComponentProps) {
        super(props)
        this.handleLogoutClick = this.handleLogoutClick.bind(this)
    }

    handleLogoutClick() {
        UserRepository.logout()
        this.props.history.push(Paths.login)
    }

    render() {
        return UserRepository.isLoggedIn() ? (
            <div>
                <BrowserRouter>
                    <div id="menu">
                        <div className="title">Dashbaord</div>
                        <Nav className="flex-column" defaultActiveKey>
                            <Link to={`${this.props.match.path}/users`}>Users</Link>
                            <Nav.Link onClick={this.handleLogoutClick}>Logout</Nav.Link>
                        </Nav>
                    </div>
                    <div id="content">

                        <Switch>
                            <Route path={`${this.props.match.path}/users`} component={Users} />
                        </Switch>
                    </div>
                </BrowserRouter>

            </div>

        ) : Paths.redirectToLogin()
    }

}

When I go to dashbaord and click users link, it works, but if I refresh the page with same url, it shows blank page. Any solution on how I can go directly to child route?

I am very new to react js, kind a learning now. I found debugging this routing thing very difficult, you don't get any error or clue what went wrong!

webpack config file

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const distDir = path.resolve(__dirname, 'dist')

module.exports = {
    entry: [
        "./src/index.tsx"
    ],
    mode: 'development',
    output: {
        filename: "main.js",
        path: distDir
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'babel-loader',
                exclude: /node_module/
            },
            {
                test: /\.scss$/,
                use: [
                    'style-loader',
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader'
                ]
            }
        ]
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js']
    },
    plugins: [
        new HtmlWebpackPlugin(
            {
                title: 'Dashboard',
                template: 'index.html'
            }
        ),
        new MiniCssExtractPlugin()
    ],
    devServer: {
        contentBase: distDir,
        historyApiFallback: {
            index: 'index.html'
        },
        hot: true
    },
    externals: {
        "react": "React",
        "react-dom": "ReactDOM"
    }
}

Answer 1

Just tried a fresh install of react-router-dom with this code and looks to be working for me. My guess is either the strings are off or there is additional library or functionality that is prevent the page to load.

If you are running this in local with yarn start then the routes should handle loading.

Possible Error:

If you are using this in a production environment, building the react app, and the loading just the build (html & js), then you would still need to configure your nginx or http server to point all routes to the single index.html file, otherwise your http server might just look for a folder that doesn't exist and show a blank page on a page refresh.

Here's the code that's working for me:

File: App.tsx

import React from 'react';
import { BrowserRouter, Route, Switch } from "react-router-dom";
import Dashboard from './Dashboard'

class App extends React.Component {
  render () {
    return (
      <div>
        <BrowserRouter>
          <Switch>
            <Route exact path={'/login'} render={() => <h1>Login</h1>} />
            <Route path={'/dashboard'} component={Dashboard} />
          </Switch>
        </BrowserRouter>
      </div>
    )
  }
}

export default App;

File: Dashboard.tsx

import React from 'react';
import { Route, Switch, Link } from "react-router-dom";

class Dashboard extends React.Component {
  render () {
    return (
      <div>
          <h1>Dashboard</h1>
          <ul>
            <li><Link to="/dashboard/users">Users</Link></li>
            <li><Link to="/dashboard/account">Account</Link></li>
            <li><Link to="/login">Login</Link></li>
          </ul>
          <Switch>
            <Route path={'/dashboard/users'} render={() => <h2>Users</h2>} />
            <Route path={'/dashboard/account'} render={() => <h2>Account</h2>} />
          </Switch>
      </div>
    )
  }
}

export default Dashboard;