reactjs - Webpack 4 + react router の二つのサブパスが null を返す

私は自分のページのためにルーターを作っていますが、問題が発生しました。

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（何もなし：空白のページ）を返します

どうやって自分の問題を解決できますか？ありがとうございます

編集：SignInコンポーネントのコード：

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' に置き換えると動作しません

回答 #1

問題は、私の<script>タグが相対リンクになっていることです。私はそれを絶対リンクにしました。

これを使う

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

ではない

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

ではない

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

私は疲れていて、これを見つけました