带有create-react-app的React-Router没有安装/渲染组件

Question

首先让我说我对反应和反应路由器（特别是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，向下传递了一个update方法并更新了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中的Route），看不到任何动作。 当我手动刷新页面时，一切都很好，但是显然这不是我想要的。 如果我犯了任何明显的或忌讳的React错误，请随时指出这些错误，因为我只是在很短的时间内就已经做出反应，并且离开网络的时间更长了。

任何帮助表示赞赏。 谢谢

编辑 -

我忘记添加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

您在Router标记内有一个额外的Router标记，这使得其中的Link引用了该额外的Router，而不是您可能要使用的App.js中的那个。

要解决此问题，只需从EmployerTable.js中删除多余的Router标记。

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