CODEWITHSUNDEEP
javascript
Mikel
Mikel

Reputation: 443

React router , routes not workin

I am tried to make a chat room application with react js, but I have faced a problem when I tried to see just chatroom page then it's ok, but when I refresh the page then again show me the home page that mean show me both page in the chatroom page, I don't know why show me home page again,

I have tried this way:

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;

any suggestion please.

Upvotes: 0

Views: 32

Answers (1)

Alamin
Alamin

Reputation: 2165

You should use react router dom exact way

like: import { BrowswerRouter as Router, Route, Switch } from "react-router-dom";

then take upper the render router.

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;

Upvotes: 1

Related Questions