Why is React routing asp.net mvc not working?

P

Paul Fawkes2019-08-29 17:48:38

Node.js

Paul Fawkes, 2019-08-29 17:48:38

I can’t do routing, nothing is displayed on the page, what could be the problem?
Solution

employee.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>);
        }
}

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
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>

the output is just a blank page

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

R

Roman, 2019-09-09
@popuguytheparrot

You must first build the application using at least create-react-app to begin with (not recommended for use in production). In cshtml, you need to connect the assembled bundle of js code.
For production build it is recommended to use parcel, webpack, rollup