Компонент Switch не обновляет представление

Question

Я обнаружил проблему с моим приложением реагирования, использующим response-router-dom v5.

Когда я изменяю маршрут вручную или когда я использую, компонент не обновляется, даже когда я обновляю стр.

Вот мой код:

import React, { useEffect, useState } from 'react'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import openSocket from "socket.io-client"

import ChannelSelection from './auth/ChannelSelection'
import Home from './home/Home'

import AppContext from '@context/AppContext'

const App = () => {
  const [socket, setSocket] = useState()

  const [channel, setChannel] = useState('')
  const [pseudo, setPseudo] = useState('')

  const store = {
    user: {
      pseudo: pseudo,
      setPseudo: (pseudo) => setPseudo(pseudo)
    },
    app: {
      channel: channel,
      setChannel: (channel) => setChannel(channel)
    }
  }

  useEffect(() => {
    const host = '127.0.0.1'
    const port = '8080'

    setSocket(openSocket(host + ':' + port))
  }, [])

  return (
    <AppContext.Provider value={store}>
      <Router>
        <Switch>
          <Route exactPath="/" component={() => <ChannelSelection socket={socket} />} />
          <Route path="/:channel" component={() => <Home socket={socket} />} />
        </Switch>
      </Router>
    </AppContext.Provider>
  )
}

export default App

Я немного запутался, потому что уже использовал в своей жизни response-router-dom и никогда не сталкивался с этой проблемой. .

Заранее спасибо!

Answer 1

Вы должны использовать путь , а не точный путь Я думаю?

<Route path="/" exact component={() => <ChannelSelection socket={socket} />}

Путь будет полезен, если у вас есть несколько путей с одинаковыми именами. Например, path = "/ some" и path = "/ some / path" , где вам нужно точное ключевое слово.

Answer 2

Добавьте реквизиты exact в routes и измените exactPath на path.

В react-router-dom. 1010 нет пропоры с именем exactPath. *

 <Route path="/" exact component={() => <ChannelSelection socket={socket} />} />