Question 204358 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – React router is not working properly, trying to route some components but it's not rendering

My index.js is..

import React from "react";
import ReactDOM  from "react-dom";

import App from "./App";

ReactDOM.render(<App />, document.querySelector("#root"));

My App.js is …

import React from "react";

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

import Join from "./components/Join";
import Chat from "./components/Chat";

const App = () => {
    return (
         <Router>
            <div>
         <Routes>
         <Route  path="/" exact component={Join} />
         <Route path="/chat"  component={Chat} /> 
         </Routes>
         </div>
         </Router>

);
    }

export default App;

I’m not able to find out the error, either App is not exporting properly or there’s some issue on router or problem is with rendering. I don’t know
and join component is

import React from "react";

const Join = () => {
    return (
        <h1>Hiii Join</h1> 
    )
}

export default Join;

Ideally it should display Hii Join but browser is blank.

Tags:

2

Answers


  1. 0

    Can you share a screenshot of the issue, as nothing seems that wrong. Also, how are you running the project?

    Login or Signup to reply.
  2. 0

    Here is my code…

    • package.json
      "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.4.4",

}
    • How did I define Route components?
    import LoginScreen from './screens/login';
import RegisterScreen from './screens/register';
import HomeScreen from './screens/Home';

const Navigations = () => {
    return (
        <Routes>
            <Route path="/" element={<HomeScreen/>}/>
            <Route path="/login" element={<LoginScreen/>}/>
            <Route path="/register" element={<RegisterScreen/>}/>
            <Route path="/password" element={<PasswordScreen/>}/>
            <Route path="/types" element={<TypesScreen/>}/>
            <Route path="/status" element={<StatusScreen/>}/>
            <Route path="/test" element={<TestScreen/>} />
            <Route path="*" element={<NotFoundScreen/>}/>
        </Routes>
    )
}

    Was it helpful?

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search