React routing asp.net mvc не работает!

101

27 июня 2021, 10:40

Не получается сделать роутинг, на странице ничего не отображается в чем может быть проблема?

Employee.jsx (Candidates такой же почти)
    import React from 'react';
class Employee extends React.Component {
    constructor(props) {
        super(props);
        this.state = { data: props.employee };
    }
    render() {
        return (<div>
            <table border="2" width="600">
            <tr>
                <td>{this.state.data.Id}</td>
                <td>{this.state.data.Name}</td>
                <td>{this.state.data.Surname}</td>
                <td>{this.state.data.SecondName}</td>
                <td>{this.state.data.Age}</td>
                <td>{this.state.data.Position}</td>
            </tr>
            </table>
        </div>);
    }
}
export default class Employees extends React.Component {
    constructor(props) {
        super(props);
        this.state = { employees: [] };
    }
    loadData() {
        var xhr = new XMLHttpRequest();
        xhr.open("get", this.props.getUrl, true);
        xhr.onload = function () {
            var data = JSON.parse(xhr.responseText);
            this.setState({ employees: data });
        }.bind(this);
        xhr.send();
    }
    componentDidMount() {
        this.loadData();
    }
    render() {
        return (
            <div>
                {
                    this.state.employees.map(function (employee) {
                        return <Employee employee={employee} />
                    })
                }
            </div>);
        }
}

header.jsx

  import React from 'react';
import { Link } from 'react-router-dom';
export default class Header extends React.Component {
    render() {
        return (
            <header>
                <menu>
                    <ul>
                        <li>
                            <Link to="/">Employees</Link>
                        </li>
                        <li>
                            <Link to="/Candidates">Candidates</Link>
                        </li>
                    </ul>
                </menu>
            </header>
        );
    }
};

app.jsx

 import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Header from './header/header.jsx';
import Candidates from './candidate/candidate.jsx';
import Employees from './employee/employee.jsx';
    export default class App extends React.Component {
        render() {
            return (
                <Router>
                    <div>
                        <Header />
                        <main>
                            <Switch>
                                <Route path="/candidate" component={Candidates} />
                                <Route path="/" component={Employees} />
                            </Switch>
                        </main>
                    </div>
                </Router>
            );
        }
    };

index.jsx

  import React from 'react' 
import { render } from 'react-dom' 
import App from '../App/app.jsx' 
render(
    <App />,
    document.getElementById('content')
)

index.cshtml

 @{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

    <html>
    <head>
        <title>Employee</title>
    </head>
    <body>
        <div id="content"></div>
        <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.development.js"></script>
        <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.development.js"></script>
        <script src='@Url.Content("~/App/index.jsx")'></script>
    </body>
    </html>

просто пустая страничка на выходе

вот что пишет в консоли

Создание интернет-магазина электроники в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как прикрепить изображение к методу Wall.Post в vkNet

Непонятно как заполняется/работает attachments в методе WallPost

195

ERROR_PIPE_BUSY при переподключении к именованному каналу

Нужно организовать межпроцессорное взаимодействие через именованные каналыНа стороне сервера делается так:

104

C# Обращение к классу из любого класса

Допустим есть класс Repository, есть входная точка в программу класс Server, в Server'e происходит вызов класса Repository в котором в конструкторе происходит...

119

Подключение к базе данных из сервера

107