Webpack 4 + react router 两个子路径返回null答案

【问题标题】：Webpack 4 + react router two sub path return nullWebpack 4 + react router 两个子路径返回null
【发布时间】：2018-10-08 20:29:48
【问题描述】：

我正在为我的页面创建路由器，但出现了问题。

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'

，它不起作用

【问题讨论】：

发布登录组件代码
我已经发布了
你是在地址栏中手动替换它吗？
尝试通过链接导航到那里？
当然。我确保在发布此问题之前出现问题

标签： reactjs typescript webpack react-router

【解决方案1】：

问题是我的<script> 标签有一个相对链接。我已经做到了绝对。

使用这个

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

没有

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

没有

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

累了找到this

【讨论】：