Question

刚开始一个Meteor / React项目，但是使用react-router时，我无法通过路线更改来渲染组件。当我不切换到ApplicationContainer路由时，可以加载LoginPage，但是切换时，LoginPage根本不会渲染。我还检查了JavaScript控制台是否有任何错误，但未显示任何错误。我在下面做错了什么，导致我的LoginPage componenet无法呈现吗？

main.html

<head>
    <title>FRC Scouting Application</title>
</head>

<body>
    <div id="target"></div>
</body>

main.jsx

import { Meteor } from 'meteor/meteor';
import { render } from "react-dom";
import { renderRoutes } from "../imports/startup/client/routes";

Meteor.startup(() => {
    render(renderRoutes(), document.getElementById('target'));
});

routes.jsx

import React from 'react'
import { BrowserRouter as Router, Route } from 'react-router-dom';

import ApplicationContainer from '../../../imports/ui/layouts/ApplicationContainer.jsx'
import LoginPage from "../../ui/pages/LoginPage";

export const renderRoutes = () => {
    return (
        <Router>
            <div>
                <Route exact path="/" component={ApplicationContainer}/>
                <Route path="/login" component={LoginPage}/>
            </div>
        </Router>
    );
};

ApplicationContainer.jsx

import React from 'react'

export default class ApplicationContainer extends React.Component {
    constructor(props) {
        super(props);
        this.state = this.getMeteorData()
    }

    getMeteorData() {
        return {isAuthenticated: Meteor.userId() !== null};
    }

    componentWillMount() {
        if (!this.state.isAuthenticated) {
            this.props.history.replace('/login');
        }
    }

    render() {
        return (
            <div>
                <h1>Hello</h1>
            </div>
        )
    }
}

LoginPage.jsx

import React from 'react'

export default class LoginPage extends React.Component {
    constructor(props){
        super(props);
    }

    render() {
        return (
            <div className="login-container">
                <label htmlFor="email"><b>Email</b></label>
                <input type="email" placeholder="Enter Email" name="email" required/>

                <label htmlFor="password"><b>Password</b></label>
                <input type="password" placeholder="Enter Password" name="password" required/>

                <button type="submit">Login</button>
                <label>
                    <input type="checkbox" checked="checked" name="remember">Remember Me</input>
                </label>
            </div>
        )
    }
}

React + Meteor ---组件不会在路线更改时呈现

0 个答案: