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 （没有：空白页）

我如何解决我的问题？谢谢

编辑：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'

，则无效

Answer 1

问题是我的<script>标记有相对链接。我做到了绝对。

使用此

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

不

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

不

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

我累了，发现this

Webpack 4 +反应路由器的两个子路径返回null

1 个答案: