首先，我要说我对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，向下传递了一个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)
答案 0 :(得分：1)
您在 Router 标记内有一个额外的 Router 标记，这使得内部的 Link 引用了额外的 Router < / strong>，而不是您可能要使用的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>
)
}