Webpack 4 + react router two sub path return null

Question

I am creating router for my page but the problem appear.

import * as React from 'react';
import {Route, Router, Switch, Redirect} from 'react-router-dom';
import { createBrowserHistory } from 'history';
import SignIn from "./pages/auth/signIn";
import Home from "./pages/home";
let history = createBrowserHistory();
class App extends React.Component {
    render(){
        return(
            <Router history={history}>
                <Switch>
                    <Route exact path='/' component={Home}/>
                    <Route exact path='/user' component={SignIn}/> //It work
                    <Route exact path='/user/signIn' component={SignIn}/> //It return null when I open localhost:8080/user/signIn
                    <Redirect to="/"/>
                </Switch>
            </Router>

        )
    }
}
export default App;

When I open localhost:8080/user It working!

But I open localhost:8080/user/signIn It notworking and return null (nothing: blank page)

How I can resolve my problem? Thanks

Edit: SignIn component code:

import * as React from 'react';
import {Form, Icon, Input, Button, Divider, Spin} from 'antd';

class SignIn extends React.Component<any, any> {
    constructor(props: any) {
        super(props);
        this.state = {
            isLoading: false
        }
    }

    handleSubmit = (e: any) => {
        e.preventDefault();
        this.setState({isLoading: true})
        this.props.form.validateFields((err: any, values: any) => {
            if (!err) {
                console.log('Received values of form: ', values);
            }
        });
    }

    public render() {
        return (
            <div className="login-Background">
                <section className="login-form-div">
                    <Spin spinning={this.state.isLoading}>
                    <Form onSubmit={this.handleSubmit} className="login-form">
                        <h2 style={{color:'blue'}}>SIGNIN</h2>
                        <Button  type="primary" loading={this.state.isLoading}  icon="facebook" className="login-form-button" style={{marginTop:20,width:'100%',opacity:1}}>
                            Facebook
                        </Button>
                        <Divider> hoặc </Divider>
                            <Input disabled={this.state.isLoading} style={{marginTop:0}} prefix={<Icon type="user" style={{color: 'rgba(0,0,0,.25)'}}/>}
                                   placeholder="Username"/>

                            <Input disabled={this.state.isLoading} style={{marginTop:20}} prefix={<Icon type="lock" style={{color: 'rgba(0,0,0,.25)'}}/>} type="password"
                                   placeholder="Password"/>

                        <Button type="primary" htmlType="submit" loading={this.state.isLoading} className="login-form-button"
                                style={{marginTop:20,width:'100%',opacity:1}}>
                            Log in
                        </Button>
                    </Form>
                    </Spin>
                </section>

            </div>
        )
    }
}

export default SignIn;

It is not working if I replace path='/user' to path='/user/signIn'

Answer 1

The issue is that my <script> tag has a relative link. I had made it absolute.

Use this

<script src="/static/bundle.js"></script>

Not

<script src="static/bundle.js"></script>

Not

<script src="./static/bundle.js"></script>

I have tired and I found this