Click here to Skip to main content
15,561,907 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I can’t do routing, nothing is displayed on the page, what could be the problem? just a blank page


What I have tried:

Employee.jsx its must display on index page

JavaScript
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
JavaScript
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
JavaScript
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
JavaScript
import React from 'react' 
import { render } from 'react-dom' 
import App from '../App/app.jsx' 

render(
    <App />,
    document.getElementById('content')
)


index.cshtml

Razor
@{
    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>
Posted
Updated 19-Jan-20 22:12pm
v2

1 solution

You can definitely do this. But I suggest that Create your React project with the use of Visual Studio React Template. Because all configuration will generate automatically.

Also you can do it in any react project. In React project 'react-router' is responsible for routing.

You can see also react routing example
Best React Router Example in React Application
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900