Question

我正在与反应路线4挣扎，试图猜测为什么它只适用于主模块。

我的代码：

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
import Enterprise from './containers/Enterprise'
import Provider from './containers/Provider'
import Home from './containers/Home'

let render = () => {

  ReactDOM.render(
    <Router>   
       <div>
         <Switch>
            <Route exact path="/" component={Home}/>
            <Route exact path="/enterprises" component={Enterprise} >
            <Route exact path="/providers" component={Provider} />
         </Switch>                         
      </div>
    </Router>,
    document.getElementById('root')
  )
} 

render()

一旦我在AppContainer中声明路由（生活在一个单独的文件中），这将停止工作。像：

AppContainer.js

imports...

class AppContainer extends Component {

  shouldComponentUpdate () {
    return false
  }

  render () {

    return (
        <Header />

        <Sidebar /> 

        <main>
          <Switch>
            <Route exact path="/" component={Home}/>
            <Route exact path="/enterprises" component={Enterprise} >
            <Route exact path="/providers" component={Provider} />
          </Switch> 
        </main>

        <Footer />
    )
  }
}

export default AppContainer

main.js

imports...

let render = () => {

  ReactDOM.render(
    <Router>   
        <AppContainer />          
    </Router>,
    document.getElementById('root')
  )
}

我正在使用webpack模块，但没有使用代码分割，所以...我很困惑。我在网上搜索了很多在分离模块中工作的例子（即使源代码显示在单个文件中）。

有任何线索吗？

Answer 1

似乎问题是shouldComponentUpdate（）。我现在正在使用常量并且它可以正常工作。

AppContainer.js

...进口

    const AppContainer = () => (

      <div className="page-wrapper">

          <Header />

          <div className="page-container">   

              <Sidebar />

                <main>           
                  <Switch>          
                    <Route exact path="/" component={Home} />   
                    <Route exact path="/enterprises" component={Enterprise} >
                    <Route exact path="/providers" component={Provider} />          
                  </Switch> 
                </main>                                               
          </div>

          <Footer />

      </div>  
)

（顺便说一句，该块实际上是在另一个名为Page的文件组件中。我只是在这里简化我的代码）

React路由器4仅适用于主模块

1 个答案: