Question

我试图用 react js 制作一个聊天室应用程序，但是当我尝试只查看聊天室页面时遇到了问题，然后就可以了，但是当我刷新页面然后再次向我显示主页时，这意味着在聊天室页面中向我显示两个页面，我不知道为什么要显示我再次主页，

我试过这种方式：

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;

反应路由器，路由不起作用

1 个答案: