Компонент не отображается в реагирующем маршрутизаторе с laravel

Question

Я новичок в React и пытаюсь отобразить маршрут реакции, используя реакционный маршрутизатор dom, но соответствующий компонент не появляется. Я посмотрел ответы на другие вопросы ОС, связанные, но без помощи. Вот мой файл app.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import AdminLogin from './AdminLogin';


export default class AdminApp
 extends Component {
   render() {
     return (
        <Router>
            <Switch>
                <div className="App">
                        <Route path="/" exact={true}  component = {AdminLogin} />
                </div>
            </Switch>
        </Router>
    );
}
}

if (document.getElementById('app')) {
    ReactDOM.render(<AdminApp />, document.getElementById('app'));
}

Когда я проверяю свой html-файл, я получаю

<div id="app">
    <div class="App" location="[object Object]" computedmatch="[object Object]"></div>
</div>

, это мой компонент adminLogin

import React, {Component} from 'react';
import {adminLogin} from './UserFunctions';

export default class AdminLogin extends Component {
    constructor(){
    super()
    this.state = {
        email: '',
        password: '',
        errors: {}
    }
    this.onChange = this.onChange.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
}

onChange(e){
    this.setState({ [e.target.name]: e.target.value })
}

onSubmit(e){
    e.preventDefault;
    const user = {
        email : this.state.email,
        password : this.state.password
    }

    adminLogin(user).then(res => {
        if(res) {
            this.props.history.push('/dashboard');
        }
    })
}


render(){
    return (
        <div className="kt-grid kt-grid--ver kt-grid--root">
            <div className="kt-grid kt-grid--hor kt-grid--root  kt-login>
                  <h1>Login Now</h1>
            </div>
        </div>
    )
}

}

Answer 1

Это работает, только если вы пытаетесь использовать корневой путь (/). Если вам нужно визуализировать этот компонент в подпути (например, /foo/bar/login), это должно быть определено как путь маршрута.

<Route path="/foo/bar/login" exact={true} component = {AdminLogin} />