React路由器，路由不工作

Question

我试图用react js做一个聊天室应用程序，但我遇到了一个问题，当我试图只看到聊天室页面时，它是ok的，但当我刷新页面然后再次显示主页时，这意味着在聊天室页面中显示两个页面，我不知道为什么再次显示我的主页，

我试过这样做：

import React from "react";
import { Router, Route } from "react-router-dom";
import HomePage from "./HomePage";
import TopBar from "./TopBar";
import { createBrowserHistory as createHistory } from "history";
import "./App.css";
import ChatRoomPage from "./ChatRoomPage";
const history = createHistory();

function App() {
  console.log("Working");
  return (
    <div className="App">
      <Router history={history}>
        <TopBar />
        <Route path="/:chatRoomId" component={HomePage} />

        <Route
          path="/chatroom"
          exact
          render={(props) => <ChatRoomPage {...props} />}
        />
      </Router>
    </div>
  );
}
export default App;

有什么建议请提出来。

Answer 1

你应该严格按照react router dom的方式使用

喜欢：import { BrowswerRouter as Router, Route, Switch } from "react-router-dom";

然后将渲染路由器放在上面。

import React from "react";
import { BrowswerRouter as Router, Route, Switch } from "react-router-dom";
import HomePage from "./HomePage";
import TopBar from "./TopBar";
import { createBrowserHistory as createHistory } from "history";
import "./App.css";
import ChatRoomPage from "./ChatRoomPage";
const history = createHistory();

function App() {
  console.log("Working");
  return (
    <div className="App">
      <Router history={history}>
        <TopBar />
        <Switch>

         <Route
          path="/chatroom"
          exact
          render={(props) => <ChatRoomPage {...props} />}
        />

        <Route path="/:chatRoomId" component={HomePage} />

        </Switch>
      </Router>
    </div>
  );
}
export default App;