ตอบสนองอุปกรณ์ประกอบฉากเราเตอร์ 'ตำแหน่ง' / 'การจับคู่' ไม่ได้อัปเดตด้วย 'ConnectedRouter'

ฉันได้ตั้งค่าแอปตามในเอกสารแล้ว:

ขั้นตอนที่ 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 ...
    ),
  ),
)

ขั้นตอนที่ 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')
)

ฉันคลิกที่ Link หรือ dispatch(push('/new-url/withparam'))

อย่างไรก็ตาม อุปกรณ์ประกอบฉากสำหรับ match location ยังคงเป็นค่าก่อนหน้าหรืออะไรก็ตามที่หน้าแรกเป็น

เกิดอะไรขึ้น?




คำตอบ (2)


อันนี้กัดฉันหลายครั้ง

Switch และ Route ของคุณ ฯลฯ ต้อง ไม่ อยู่ภายในส่วนประกอบที่เชื่อมต่อกัน!

หากเชื่อมต่อส่วนประกอบแล้ว อุปกรณ์ประกอบฉากสำหรับ match, location ฯลฯ ดูเหมือนจะไม่ได้รับการอัปเดตและเผยแพร่ไปยังเส้นทางของคุณ

ซึ่งหมายความว่าอย่าเชื่อมต่อระดับบนสุดของคุณ App หรือ Root หรือคอนเทนเนอร์ที่ซ้อนกันอื่นๆ ระหว่าง ConnectedRouter ถึง Route

--

อัปเดต:

คุณอาจต้องห่อส่วนประกอบของคุณด้วย

<Route render={ (routerProps) => <YourConnectedComponent { ...routerProps } />
person ilovett    schedule 17.08.2018
comment
ขอบคุณ. ทำให้ฉันมีความสุขมาก. - person rvandoni; 19.11.2018
comment
คุณช่วยกรุณาโพสต์โค้ดตัวอย่างตามคำถามของคุณได้ไหม? - person Imran Ahmad; 30.06.2019

ฉันตัดสินใจเพิ่มตัวอย่างที่นี่เนื่องจากรู้สึกว่ามันเป็นข้อมูลที่มีค่า - แม้ว่าจะได้รับคำตอบแล้วก็ตาม

ฉันมีปัญหาที่คล้ายกัน เมื่อฉันใส่ url ลงในประวัติเราเตอร์ มันเปลี่ยน URL แต่ไม่สามารถนำทางอย่างถูกต้องบนส่วนประกอบที่ฉันต้องการ ฉันกูเกิลและค้นหาคำตอบเป็นเวลาหลายชั่วโมง จนกระทั่งพบกระทู้นี้ ซึ่งในที่สุดก็ช่วยให้ฉันค้นหาสิ่งที่ฉันทำผิดได้ เครดิตทั้งหมดเป็นของ @ilovett

นี่คือตัวอย่าง หากมีใครต้องการเพื่อความเข้าใจที่ดีขึ้น:

ฉันมีรหัสคล้ายกับสิ่งนี้:

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>

มันทำงานได้ดีเมื่อฉันมาที่โปรเจ็กต์ แต่จากนั้นฉันตัดสินใจปรับโครงสร้างส่วนประกอบเค้าโครงใหม่และเชื่อมต่อกับร้านค้า ซึ่งทำให้ Component2 หยุดรับค่าที่ถูกต้องใน ownProps.match.params.parameter1 และด้วยเหตุนี้จึงทำให้คอมโพเนนต์แสดงผลผิดโดยสิ้นเชิง

ดังนั้นสิ่งเดียวที่คุณต้องทำคือย้ายเลย์เอาต์ไปไว้นอก ConnectedRouter ไม่มีสิ่งใดระหว่าง ConnectedRouter และ เส้นทาง ที่สามารถเชื่อมต่อกับร้านค้าได้

ตัวอย่างการทำงานคือ:

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