React Router mendukung `lokasi` / `kecocokan` tidak diperbarui dengan `ConnectedRouter`

Saya sudah menyiapkan aplikasi seperti di dokumen:

Langkah 1

...
import { createBrowserHistory } from 'history'
import { applyMiddleware, compose, createStore } from 'redux'
import { connectRouter, routerMiddleware } from 'connected-react-router'
...
const history = createBrowserHistory()

const store = createStore(
  connectRouter(history)(rootReducer), // new root reducer with router state
  initialState,
  compose(
    applyMiddleware(
      routerMiddleware(history), // for dispatching history actions
      // ... other middlewares ...
    ),
  ),
)

Langkah 2

...
import { Provider } from 'react-redux'
import { Route, Switch } from 'react-router' // react-router v4
import { ConnectedRouter } from 'connected-react-router'
...
ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}> { /* place ConnectedRouter under Provider */ }
      <div> { /* your usual react-router v4 routing */ }
        <Switch>
          <Route exact path="/" render={() => (<div>Match</div>)} />
          <Route render={() => (<div>Miss</div>)} />
        </Switch>
      </div>
    </ConnectedRouter>
  </Provider>,
  document.getElementById('react-root')
)

Saya mengklik Link atau bahkan dispatch(push('/new-url/withparam'))

Namun props untuk match location tetap sama dengan nilai sebelumnya atau berapapun halaman pertamanya.

Apa yang terjadi?


react-redux react-router-dom react-router connected-react-router
person ilovett    schedule 17.08.2018    source sumber

Jawaban (2)


arrow_upward
11
arrow_downward

Yang ini telah menggigitku berkali-kali.

Anda Switch dan Route dll. HARUS TIDAK BERADA DI DALAM KOMPONEN YANG TERHUBUNG!

Jika komponen terhubung, props untuk match, location, dll. sepertinya tidak diperbarui dan menyebar ke rute Anda.

Artinya, jangan sambungkan App atau Root tingkat teratas, atau kontainer bertumpuk lainnya di antara ConnectedRouter dan Route

--

Memperbarui:

Anda mungkin hanya perlu membungkus komponen Anda dengan

<Route render={ (routerProps) => <YourConnectedComponent { ...routerProps } />
person ilovett    schedule 17.08.2018
comment
TERIMA KASIH. membuatku bahagia. - person rvandoni; 19.11.2018
comment
Bisakah Anda memposting kode contoh seperti pada pertanyaan Anda? - person Imran Ahmad; 30.06.2019

arrow_upward
0
arrow_downward

Saya memutuskan untuk menambahkan contoh di sini karena saya merasa ini adalah masukan yang berharga - meskipun sudah dijawab.

Saya memiliki masalah serupa, ketika saya memasukkan url ke dalam riwayat router, itu mengubah URL tetapi tidak menavigasi dengan benar pada komponen yang saya inginkan. Saya mencari di Google dan mencari jawaban selama berjam-jam, hingga saya menemukan thread ini yang akhirnya membantu saya untuk mengetahui kesalahan apa yang saya lakukan. Jadi semua penghargaan untuk @ilovett.

Jadi, inilah contohnya, jika seseorang memerlukannya untuk pemahaman yang lebih baik:

Saya punya kode yang mirip dengan ini:

export const routes =
    <Layout>
        <Switch>
            <Route exact path='/' component={ Component1 } />
            <Route path='/parameter1/:parameterValue' component={ Component2 } />
        </Switch>
    </Layout>;

<Provider store={ store }>
    <ConnectedRouter history={ history } children={ routes } />
</Provider>

Itu berfungsi dengan baik ketika saya datang ke sebuah proyek, tetapi kemudian saya memutuskan untuk memfaktorkan ulang komponen Tata Letak dan saya menghubungkannya ke toko yang menyebabkan Komponen2 berhenti menerima nilai yang benar di ownProps.match.params.parameter1 dan karena itu membuat komponen menjadi salah sepenuhnya.

Jadi satu-satunya hal yang perlu Anda lakukan adalah memindahkan Layout ke luar ConnectedRouter. Tidak ada apa pun antara ConnectedRouter dan Route yang dapat dihubungkan ke toko.

Contoh kerjanya adalah ini:

export const routes =
        <Switch>
            <Route exact path='/' component={ Component1 } />
            <Route path='/parameter1/:parameterValue' component={ Component2 } />
        </Switch>;

<Provider store={ store }>
    <Layout>
        <ConnectedRouter history={ history } children={ routes } />
    </Layout>
</Provider>
person Ademar    schedule 20.01.2021