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

【问题标题】：React-Router with create-react-app not mounting/rendering component带有 create-react-app 的 React-Router 未安装/渲染组件
【发布时间】：2018-12-02 05:57:28
【问题描述】：

首先让我说我对 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 时，什么也没有。它更改了网址，但似乎没有其他任何事情发生。我已经在我的路由器标签上尝试了 forceRefresh，我已经向下传递了一个更新方法并更新了 app.js 的状态，但是在手动刷新页面之前什么都不会呈现。下面是我的 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 错误，请随时指出它们，因为我只是在很短的时间内做出反应，而离开 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)

【问题讨论】：

EmployerController 类在哪里？
我刚刚添加了它。谢谢你的收获，它让我忘记了。

标签： reactjs ecmascript-6 react-router create-react-app

【解决方案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>
    )
}

【讨论】：

我的话.....我感激不尽。我敢肯定我最终会看到它，但我已经为此倾注了好几个小时，我猜只是一直在看过去。非常感谢。