Webpack 4 + реагирует маршрутизатор, два подчиненных пути возвращают ноль

Question

Я создаю маршрутизатор для своей страницы, но проблема появляется.

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;

Когда я открываю localhost: 8080 / user Это работает!

Но я открываю localhost: 8080 / user / signIn Это не работает и возвращает null (ничего: пустая страница)

Как мне решить мою проблему? Спасибо

Редактировать: код компонента входа в систему:

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;

Не работает, если я заменю path = '/ user' на path = '/ user / signIn'

Answer 1

Проблема в том, что мой тег <script> имеет относительную ссылку. Я сделал это абсолютным.

Используйте это

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

Не

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

Не

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

Я устал и нашел это