CODEWITHSUNDEEP
reactjsroutesreact-router-dom
Samrat Alam
Samrat Alam

Reputation: 567

React Router Dom: <Route/> did not work properly

I am trying to build a chat app. when i using react-router-dom, I got some problem in .

Here index.js file:

import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter, Routes } from "react-router-dom";

import "./index.css";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

Here is my App.js File:

import { Route, Switch, Link } from "react-router-dom";
import HomePage from "./Components/HomePage/HomePage";
import ChatPage from "./Components/ChatPage/ChatPage";

function App() {
  return (
    <div>
      <>
        <Route path="/" components={HomePage} />
        <Route path="/chats" component={ChatPage} />
      </>
    </div>
  );
}

export default App;

And HomePage.js file:

import React from "react";

const HomePage = () => {
  return <div>HomePage ............</div>;
};

export default HomePage;

And ChatPage.js file:

import React from "react";

const ChatPage = () => {
  return <div>ChatPages.............. </div>;
};

export default ChatPage;

But the "http://localhost:3000/chats" give me the output. The other route did not work. Blank page was shown. "react-router-dom" version: "^5.3.3".

enter image description here enter image description here

Where is the problem? How can I solve this? Thank You.

Upvotes: 0

Views: 241

Answers (1)

S.Marx
S.Marx

Reputation: 1022

since you are using v5 you need to use switch, I see you importe it but you don't use it:

App.js

import { Route, Switch, Link } from "react-router-dom";
import HomePage from "./Components/HomePage/HomePage";
import ChatPage from "./Components/ChatPage/ChatPage";

    function App() {
      return (
        <div>
          <> /*You can remove this fragments too*/
            <Switch>
              <Route path="/" component={HomePage} />
              <Route path="/chats" component={ChatPage} />
            </Switch>
          </>
        </div>
      );
    }

and in index.js you can remove Routes from this line:

import { BrowserRouter, Routes } from "react-router-dom";

also change that line: you have components in plural it must be in singular component

<Route path="/chats" components={ChatPage} />

to

<Route path="/chats" component={ChatPage} />

Upvotes: 1

Related Questions