Các tuyến đường không điều hướng khi thiết lập React v15.5 với phản ứng-redux v5 là

Question

Tôi mới sử dụng React và tôi đã thiết lập dự án React của mình bằng Facebook create-react-app. Dưới đây là các tập tin cốt lõi:

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; 

Các p Tôi đang phải đối mặt ở đây, Khi tôi tải trang với tuyến đường cụ thể, thì thành phần đó sẽ hiển thị trên trình duyệt. Nhưng nếu tôi đang hướng đến con đường khác nhau sử dụng "Liên kết", nói

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

Trong trường hợp đó,/thành phần tiếp xúc không tải nhưng các tuyến đường đang thay đổi và phản ánh trong trình duyệt.

Tôi đã tìm giải pháp, nhưng chủ yếu là sử dụng mã bị khấu hao, Ngay cả trong react-router-redux, ví dụ chứa ConnectedRouter không có trong gói cập nhật.

Tôi không biết nếu tôi đã thực hiện một số sai lầm ngớ ngẩn trong mã hoặc một cái gì đó là mất tích.

Xin cảm ơn trước. :)

Answer 1

Giải pháp là 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)) 

Nói chung, Phản ứng Router và Redux chỉ làm việc tốt với nhau. Đôi khi, một ứng dụng có thể có một thành phần không cập nhật khi vị trí thay đổi (tuyến đường trẻ em hoặc liên kết điều hướng hoạt động không cập nhật).

Điều này xảy ra nếu:

• Các thành phần được kết nối với Redux qua connect() (Comp).
• Các thành phần không phải là một “thành phần tuyến đường”, có nghĩa là nó không được trình bày như sau:

Vấn đề là Redux thực hiện shouldComponentUpdate và không có dấu hiệu cho thấy bất cứ điều gì đã thay đổi nếu nó không nhận được đạo cụ từ bộ định tuyến. Đây là cách đơn giản để khắc phục. Tìm nơi bạn kết nối thành phần của bạn và bọc nó trong withRouter.