Проблема с реактивной маршрутизацией ASP.NET MVC
I can’t do routing, nothing is displayed on the page, what could be the problem? just a blank page
Что я уже пробовал:
Работник.jsx его должно отображаться на главной странице сайта
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>);
}
}
заголовок.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>
);
}
};
приложение.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>
);
}
};
индекс.jsx
import React from 'react'
import { render } from 'react-dom'
import App from '../App/app.jsx'
render(
<App />,
document.getElementById('content')
)
индекс.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>