Question

我使用react-router-dom v5解决了我的React应用程序中的问题。

当我手动更改路线或使用时，即使刷新页面，该组件也不会更新。

这是我的代码：

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

我现在有点困惑，因为我过去已经使用过react-router-dom，从不解决这个问题。

提前谢谢！

Answer 1

在exact中添加routes道具，并将exactPath更改为path。

在exactPath中没有名称为react-router-dom的道具。

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

Answer 2

我认为您应该使用 path 而不是 exactPath ？

const basicform = {
  name: "basicform",
  data: {
    form: {
      name: "",
      year: "",
      artist: ""
    }
  },
  methods: {
    submitForm(evt) {
      evt.preventDefault();
      //Functionality for form post
    },
    resetForm(evt) {
      evt.preventDefault();
      //functionality for form reset
    }
  }
};
export default basicform;

如果您有多个名称相似的路径，则该路径将很有用。像 path =“ / some” 和 path =“ / some / path” 一样，这是您需要确切的关键字的地方。

开关组件不会更新视图

2 个答案: