當React v15.5 setup-react-v5中設置爲

我是React新手，我已經使用Facebook的create-react-app設置了我的React項目。下面是核心文件：當React v15.5 setup-react-v5中設置爲

Index.js

import React from 'react'; 
import ReactDOM, { render } from 'react-dom'; 
import { BrowserRouter as Router } from 'react-router-dom'; 
import createHistory from 'history/createBrowserHistory'; 

import { createStore, applyMiddleware } from "redux"; 
import { Provider } from 'react-redux' 
import { routerMiddleware, syncHistoryWithStore } from 'react-router-redux'; 
import thunk from 'redux-thunk'; 
import reducers from './reducers'; 

import App from './containers/App'; 
import Routes from "./Routes"; 

const browserHistory = createHistory(); 
middleware = routerMiddleware(browserHistory); 
const store = createStore(reducers, applyMiddleware(middleware, thunk)) 
const history = syncHistoryWithStore(browserHistory, store); 

ReactDOM.render(
    <Provider store={store}> 
    <Router history={browserHistory}> 
     <App /> 
    </Router> 
    </Provider>, document.getElementById('root') 
);

Routes.js

import React, { Component } from 'react'; 
import { Route, Switch } from 'react-router'; 

import Home from './containers/Home'; 
import About from './containers/About'; 
import Contact from './containers/Contact'; 

class Routes extends Component { 
    render() { 
    return (
     <Switch> 
     <Route exact path="/" component={ Home } /> 
      <Route path="/about" component={ About } /> 
      <Route path="/contact" component={ Contact } /> 
     </Switch> 
    ); 
    } 
} 

export default Routes;

App.js

import React, { Component } from "react"; 
import { Link } from 'react-router-dom'; 
import Routes from "../Routes"; 
import SideNav from '../presentation/SideNav'; 

class App extends Component { 
    render() { 
     return (
      <div> 
       <Link to='/'>Home</Link> 
       <Link to='/about'>about</Link> 
       <Link to='/contact'>contact</Link> 
       <SideNav /> 
       <Routes /> 
      </div> 
     ); 
    } 
} 

export default App;

在P我在這裏面臨的問題是，當我使用特定的路徑加載頁面時，那麼，該組件正在瀏覽器上呈現。但如果我使用「鏈接」導航到不同的路線，說

<Link to='/contact'>contact</Link>

在這種情況下，/接觸組件未加載但路線正在發生變化，在瀏覽器中反映。

我尋找的解決方案，但大多使用折舊代碼，即使在react-router-redux，例如包含ConnectedRouter這是不是在更新包。

我不知道，如果我做的代碼什麼的一些愚蠢的錯誤丟失。

在此先感謝。 :)

來源

2017-07-13 rajat

您是否也可以複製粘貼控制檯日誌？ – hisener

控制檯中沒有錯誤，只對未使用的導入文件發出警告。 – rajat

如果我從index.js中完全刪除了redux ...然後路由工作正常，如預期的那樣... – rajat

的解決方案是here

import { withRouter } from 'react-router-dom' 

// before 
export default connect(mapStateToProps)(Something) 

// after 
import { withRouter } from 'react-router-dom' 
export default withRouter(connect(mapStateToProps)(Something))

一般來說，陣營路由器和Redux的工作就好了起來。但偶爾，應用可能會有一個組件在位置更改時不更新（子路由或活動導航鏈接不更新）。

如果發生這種情況：

該組件被連接到終極版經由連接（）（對照）。
的組件不是「路線組件」，這意味着它不會呈現像這樣：

的問題是，終極版實現shouldComponentUpdate而且也沒有跡象表明，如果不從接收道具內容發生了變化路由器。這很容易解決。找到連接組件的位置並用Router包裝。

來源

2017-07-13 14:02:45 rajat

當React v15.5 setup-react-v5中設置爲

回答

相關問題