带有create-react-app的React-Router未挂载/呈现组件

Question

首先让我说一下，我对react和react-router，更具体地说是react-router-dom是非常陌生的。我有一个模板管理网站，我的任务是使用我们的网站。我已经将许多现有的组件重新组织到它们自己的类中。我有我的app.js文件，其中包含顶部导航栏、侧边栏和内容窗口样式。在这里面，我有我的路由器，里面有交换机和路由，就像这样-(这是我的app.js文件)

import React, { Component } from 'react'
import PageSidebar from './sidebar/PageSidebar'
import PageContent from './children/PageContent'
import Navbar from './navbar/Navbar'
import Login from './login/Login'
import $ from 'jquery'
import Cookies from 'universal-cookie'
import { BrowserRouter as Router, Switch, Route, withRouter } from 'react-router-dom'

import AccountController from './account/AccountController'
import EmployerController from './employer/EmployerController'
import EmployeeController from './employee/EmployeeController'

class App extends Component {

constructor(props) {
    super(props)

    this.state = {
        login: false,
        user: null,
        cookies: new Cookies(),
        update: false

    }
    this.handler = this.handler.bind(this)
    this.update = this.update.bind(this)
}


handler(e) {
    e.preventDefault()
    console.log(localStorage.getItem('user'))
    if(localStorage.getItem('user') !== null) {
        console.log('user not null')
        this.setState({
            login: true
        })  
    } else {
        console.log('bad login attempt')
    }

}


renderPage() {
    this.setLoadingTimer()
    return (

        <div>
            <div className="loading-container">
                <div className="loader"></div>
            </div>
            <Navbar />
            <div className="main-container container-fluid">
                <div className="page-container">
                    <PageSidebar />
                    <div className="page-content">

                        <div className="page-breadcrumbs">
                            <ul className="breadcrumb">
                                <li>
                                    <i className="fa fa-home"></i>
                                    <a href="">Home</a>
                                </li>
                                <li>
                                    <a href="">Tables</a>
                                </li>
                                <li className="active">Simple and Responsive</li>
                            </ul>
                        </div>

                        <div className="page-header position-relative">
                            <div className="header-title">
                                <h1>
                                    Tables
                                    <small>
                                        <i className="fa fa-angle-right"></i>
                                        simple and responsive tables
                                    </small>
                                </h1>
                            </div>

                            <div className="header-buttons">
                                <a className="sidebar-toggler" href="" onClick={this.sideBarClick}>
                                    <i className="fa fa-arrows-h"></i>
                                </a>
                                <a className="refresh" id="refresh-toggler" href="">
                                    <i className="glyphicon glyphicon-refresh"></i>
                                </a>
                                <a className="fullscreen" id="fullscreen-toggler" href="" onClick={this.fullScreenClick}>
                                    <i className="glyphicon glyphicon-fullscreen"></i>
                                </a>
                            </div>

                        </div>
                        <Router>
                            <div className="page-body">
                                <Switch>
                                    <Route exact path="/" component={AccountController}/>
                                    <Route exact path="/employer" component={EmployerController}/>
                                    <Route exact path="/employee/:id" component={EmployeeController}/>
                                </Switch>
                                <div className="horizontal-space"></div>
                            </div>
                        </Router>
                    </div>
                </div>
            </div>
        </div>

    )
}
render() {

    if(this.state.cookies.get('etc-usr-cki') == null) {
        this.state.cookies.get('etc-usr-cki')
        return <Login handler={this.handler}/>
    }else {
        return this.renderPage()
    }
}
}

export default App

因此，在登录之后，站点会转到“AccountController”路由器。当我单击我创建的链接转到EmployerController时，什么都没有。它更改了url，但似乎没有发生任何其他事情。我已经在我的Router标签上尝试了forceRefresh，我已经向下传递了一个更新方法并更新了app.js的状态，但是在手动刷新页面之前什么都不会呈现。下面是我的AccountController和它的一个子级，负责一个表，其中包含我正在创建的链接。

AccountController

import React, { Component } from 'react'
import SimpleTable from '../children/SimpleTable'
import EmployerTable from './EmployerTable'
import { withRouter } from 'react-router-dom'

class AccountController extends Component {

constructor(props) {
    super(props)

    this.state = {account : {}}


    this.getEmployers = this.getEmployers.bind(this)
}

componentWillMount() {
    this.setState(prevState => ({account : {
        name : "account name",
        description : "account description",
        employerCount : 44
    }}))
}


getEmployers() {



    return(
        [
            {
                id: 1,
                name: "Company Name",
                address: "212 Some st.",
                employees: 32
            },
            {
                id: 2,
                name: "Another Company Name",
                address: "4545 Some ave.",
                employees: 76
            },
            {
                id: 3,
                name: "Yet Another Company Name",
                address: "6543 Some blvd.",
                employees: 122
            }
        ]
    )

    //PULL LIST OF EMPLOYERS
}

render() {
    return(
        <div>
            <div className="col-lg-offset-4 col-sm-offset-3 col-lg-4 col-sm-6 col-xs-12">
                <div className="databox databox-xlg databox-halved radius-bordered databox-shadowed databox-vertical">
                    <div className="databox-top bg-white padding-10">
                        <div className="col-lg-4 col-sm-4 col-xs-4">
                        </div>
                        <div className="col-lg-8 col-sm-8 col-xs-8 text-align-left padding-10">
                            <span className="databox-header carbon no-margin">
                                <p>{this.state.account.name}</p>
                            </span>
                            <span className="databox-text lightcarbon no-margin">
                                {this.state.account.description}
                            </span>
                        </div>
                    </div>
                    <div className="databox-bottom bg-white no-padding">
                        <div className="databox-row row-12">
                            <div className="databox-row row-6 no-padding">
                                <div className="databox-cell cell-4 no-padding text-align-center bordered-right bordered-platinum">
                                    <span className="databox-text sonic-silver  no-margin">Employees</span>
                                    <span className="databox-number lightcarbon no-margin">
                                        {this.state.account.employerCount}
                                    </span>
                                </div>
                                <div className="databox-cell cell-4 no-padding text-align-center bordered-right bordered-platinum">
                                    <span className="databox-text sonic-silver no-margin">1095's</span>
                                    <span className="databox-number lightcarbon no-margin">
                                        344
                                    </span>
                                </div>
                                <div className="databox-cell cell-4 no-padding text-align-center">
                                    <span className="databox-text sonic-silver no-margin">Some Other Data</span>
                                    <span className="databox-number lightcarbon no-margin">286</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <EmployerTable employers={this.getEmployers()} />
        </div>

    )
}

}

export default withRouter(AccountController)

最后，下面的EmployerTable类：

import React, { Component } from 'react'
import { BrowserRouter as Router, Link, withRouter } from 'react-router-dom'

class EmployerTable extends Component {

constructor(props) {
    super(props)

    this.state = {employers: []}

    this.eachEmployer = this.eachEmployer.bind(this)
    this.tableRowClickHandler = this.tableRowClickHandler.bind(this)
}



componentWillMount() {
    //HIT API FOR FULL EMPLOYER INFO HERE

    this.setState(prevState => ({
        employers: this.props.employers
    }))
}

tableRowClickHandler(e) {
    e.preventDefault()
    let eid = e.target.getAttribute('data-value')

}


eachEmployer(employer, i) {

    return (


                <tr key={employer.id}>
                    <td data-value={employer.id}>
                        {i+1}
                    </td>
                    <td data-value={employer.id}>
                        {employer.name}
                    </td>
                    <td data-value={employer.id}>
                        {employer.address}
                    </td>
                    <td data-value={employer.id}>
                        {employer.employees}
                    </td>
                    <td>
                        <div>
                            <Link to={'/employer'} className="btn btn-default">
                                View
                            </Link>
                        </div>
                    </td>
                </tr>


    )
}

render() {
    return(
        <Router>
            <div className="row">
                <div className="col-xs-12 col-md-12 col-lg-12">
                    <div className="well with-header  with-footer">
                        <div className="header bg-blue">
                            Simple Table With Hover
                        </div>
                        <table className="table table-hover">
                            <thead className="bordered-darkorange">
                                <tr>
                                    <th>
                                        #
                                    </th>
                                    <th>
                                        Name
                                    </th>
                                    <th>
                                        Address
                                    </th>
                                    <th>
                                        Employees
                                    </th>
                                    <th>
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                {this.props.employers.map(this.eachEmployer)}
                            </tbody>
                        </table>

                        <div className="footer">

                        </div>
                    </div>
                </div>
            </div>
        </Router>
    )
}
}

export default withRouter(EmployerTable)

因此，正如我所说的，我无法通过单击'EmployerTable‘中的链接看到任何操作，该链接应该指向我的app.js内部的路由。当我手动刷新页面时，一切都很好，但显然这不是我想要的。如果我犯了任何明显的或禁忌的React错误，请随时指出，因为我在react中只有很短的时间，离开web的时间要长得多。

任何帮助都是非常感谢的。谢谢

编辑--

我忘记添加EmployerController类，如下所述。这就是-

import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'


class EmployerController extends Component {


constructor(props) {
    super(props)

    this.state = {
        id : this.props.id
    }

    this.renderEmployerDataBox = this.renderEmployerDataBox.bind(this)
}

componentDidMount() {

    alert('component did mount')
}

renderEmployerDataBox() {
    return (
        <div className="col-lg-offset-4 col-sm-offset-3 col-lg-4 col-sm-6 col-xs-12">
            <div className="databox databox-xlg databox-halved radius-bordered databox-shadowed databox-vertical">
                <div className="databox-top bg-white padding-10">
                    <div className="col-lg-4 col-sm-4 col-xs-4">
                    </div>
                    <div className="col-lg-8 col-sm-8 col-xs-8 text-align-left padding-10">
                        <span className="databox-header carbon no-margin">Some Company</span>
                        <span className="databox-text lightcarbon no-margin"> Some Company's Description</span>
                    </div>
                </div>
                <div className="databox-bottom bg-white no-padding">
                    <div className="databox-row row-12">
                        <div className="databox-row row-6 no-padding">
                            <div className="databox-cell cell-4 no-padding text-align-center bordered-right bordered-platinum">
                                <span className="databox-text sonic-silver  no-margin">Employees</span>
                                <span className="databox-number lightcarbon no-margin">510</span>
                            </div>
                            <div className="databox-cell cell-4 no-padding text-align-center bordered-right bordered-platinum">
                                <span className="databox-text sonic-silver no-margin">1095's</span>
                                <span className="databox-number lightcarbon no-margin">908</span>
                            </div>
                            <div className="databox-cell cell-4 no-padding text-align-center">
                                <span className="databox-text sonic-silver no-margin">Some Other Data</span>
                                <span className="databox-number lightcarbon no-margin">286</span>
                            </div>
                        </div>
                        <div className="databox-row row-6 no-padding">
                            <div className="databox-cell cell-4 no-padding text-align-center bordered-right bordered-platinum">
                                <a className="btn" href="">Detail</a>
                            </div>
                            <div className="databox-cell cell-4 no-padding text-align-center bordered-right bordered-platinum">
                                <a className="btn" href="">Detail</a>
                            </div>
                            <div className="databox-cell cell-4 no-padding text-align-center bordered-right bordered-platinum">
                                <a className="btn" href="">Code Matrix</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}


render() {
    return (
        this.renderEmployerDataBox()
    )
}
}

export default withRouter(EmployerController)

Answer 1

您的路由器标记中有一个额外的路由器标记，这使得内部的链路引用额外的路由器，而不是您可能想要使用的App.js中的use。

要解决此问题，只需从EmployerTable.js中删除额外的路由器标记。

render() {
    return(
        <div className="row">
            <div className="col-xs-12 col-md-12 col-lg-12">
                <div className="well with-header  with-footer">
                    <div className="header bg-blue">
                        Simple Table With Hover
                    </div>
                    <table className="table table-hover">
                        <thead className="bordered-darkorange">
                            <tr>
                                <th>
                                    #
                                </th>
                                <th>
                                    Name
                                </th>
                                <th>
                                    Address
                                </th>
                                <th>
                                    Employees
                                </th>
                                <th>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            {this.props.employers.map(this.eachEmployer)}
                        </tbody>
                    </table>

                    <div className="footer">

                    </div>
                </div>
            </div>
        </div>
    )
}