Not able to render react component in react router

Question

I have a react application.

i have problem in routing of component

index.js

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

import App from './app';

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

app.jsx

Here i am routing 2 component. Login and Main component. In Main component there are many router which will use for dashboard.

My Problem : In <Switch> the 1st <Route> can render but it's not rendering from 2nd router if i hardcode in url

http://localhost:3000/#/login == rendering

http://localhost:3000/#/main = Not rendering

import React, { Component } from 'react';
import {
    BrowserRouter as Router,
    Route,
    Link,
    Switch
} from 'react-router-dom';

import Login from './login';
import Main from './main';

import createBrowserHistory from 'history/createBrowserHistory';
const customHistory = createBrowserHistory();

class App extends Component {
    constructor(props) {
        super(props);

        window.token = '';
    }

    render() {
        return <div>
                <Router>
                    <Switch>
                        <Route to="/login" component={Login} exact />
                        <Route to="/main" component={Main} exact/>
                    </Switch>
                </Router>
            </div>;
    }
}

export default App;

main.jsx

import React, {Component} from 'react';
import ReactDOM from "react-dom";

import { HashRouter, Route, Switch } from "react-router-dom";

import indexRoutes from "routes/index.jsx";

import "bootstrap/dist/css/bootstrap.min.css";
import "./assets/css/animate.min.css";
import "./assets/sass/light-bootstrap-dashboard.css?v=1.2.0";
import "./assets/css/demo.css";
import "./assets/css/pe-icon-7-stroke.css";

import Login from './login';

class Main extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return <HashRouter>
        <Switch>

          {indexRoutes.map((prop, key) => {
            return <Route to={prop.path} component={prop.component} key={key} />;
          })}
        </Switch>
      </HashRouter>;
    }
}

export default Main;

@janaka inside indexRouter there are array of routers. It is not the problem. — Sangram Badi
– Sangram Badi, Commented Sep 17, 2018 at 7:08
If move Login component to 2nd then it'll not work but Main component will work — Sangram Badi
– Sangram Badi, Commented Sep 17, 2018 at 7:09

Satyaki · Accepted Answer · 2018-09-17 08:43:28Z

5

Use

<Route path="/login" component={Login} exact />

Instead of to use path

answered Sep 17, 2018 at 8:43

Satyaki

7512 gold badges10 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Janaka Dissanayake · Accepted Answer · 2018-09-18 02:44:08Z

1

<Route path="/login" component={Login} /> <Route path="/main" component={Main} exact/>

Use Path insted of To

answered Sep 18, 2018 at 2:44

Janaka Dissanayake

5574 silver badges13 bronze badges

Comments

Japesh · Accepted Answer · 2018-09-17 08:37:33Z

0

Don't use exact attribute in main Route as shown below.

class App extends Component {
  render() {
    return <div>
            <Router>
                <Switch>
                    ...
                    <Route to="/main" component={Main} />
                </Switch>
            </Router>
        </div>;
  }
}

answered Sep 17, 2018 at 8:37

Japesh

2613 silver badges7 bronze badges

Comments

Sushmit Sagar · Accepted Answer · 2019-12-12 18:10:53Z

There are two problems with your code

First in your app.jsx file:

<Switch>
  <Route 
   to="/login"       // <== should be path="/login"
   component={Login} 
   exact
   />
  <Route 
   to="/main"        // <== should be path="/main" 
   component={Main} 
   exact             // <== remove exact prop for the nested routes to work
   /> 
</Switch>

Here to prop actually belongs to the <Link/> component provided by react-router not the <Route /> component, It should be path prop.
If you want to render child routes within <Route /> component then we never use exact prop on the Parent <Route /> component.

Second in your main.jsx file:

  indexRoutes.map((prop, key) => {
    return (
     <Route 
       to={prop.path} // <== should be path={prop.path}
       component={prop.component} 
       key={key} />;
     );
  })

Again change to prop to path prop.

Collectives™ on Stack Overflow

Not able to render react component in react router

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related