CODEWITHSUNDEEP
reactjssingle-page-application
Elcid_91
Elcid_91

Reputation: 1681

Trouble with React SPA Routing

I have the following index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from 'react-router-dom';
import Main from './main/main';
import './index.css';

ReactDOM.render(
  <BrowserRouter><Main /></BrowserRouter>,document.getElementById('root'));

the following in main.js:

import React, { Component } from 'react';
import NavMenu from "./navmenu";
import Content from "./content";
import './main.css';

class Main extends Component {
  render() {
    return (
      <div id="main-layout">
        <div id="main-header">
          <div><img src={(require("./images/ppslogo-small.png"))} alt="eeeee"/></div>
          <div><h2>Lil Test By Me</h2></div>
        </div>
        <div id="main-content">
          <NavMenu />
          <Content />
        </div>
        <div id="main-footer">
          <div>Copyright &copy; 2020. Powered By me.  All Rights Reserved.</div>
        </div>
      </div>
    );
  }
}
export default Main;

And The following in content.js

import React, { Component } from 'react';
import {Route, Switch} from 'react-dom';

import Dashboard from "../dashboard/dashboard";
import Invoicing from "../invoicing/invoicing";

class Content extends Component {
  render() {
    return(
      <Switch>
        <Route exact path="/Dashboard" component={Dashboard} />
        <Route path="/Invoicing" component={Invoicing} />
      </Switch>
    )
  }
};
export default Content

It it my attempt to create an SPA with the Content component as my target for all my subsequent pages; however, I am clearly doing something wrong as I am getting all kinds of errors all over the place. Can anyone immediately see what I am doing incorrectly here?

Upvotes: 0

Views: 79

Answers (2)

Piper2
Piper2

Reputation: 299

Use react-router-dom instead of react-router and then change your content.js code to this.

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

import Dashboard from "../dashboard/dashboard";
import Invoicing from "../invoicing/invoicing";

class Content extends Component {
  render() {
    return(
      <Router>
          <Switch>
            <Route exact path="/dashboard" component={Dashboard} />
            <Route path="/invoicing" component={Invoicing} />
          </Switch>
      </Router>
    )
  }
};
export default Content

notice that I have added Router above the switch. and changed react-router to react-router-dom and also transformed the routes to lowercase

Upvotes: 1

vitjbr
vitjbr

Reputation: 1166

Route and Switch needs to be imported from react-router-dom instead of react-dom

import React, { Component } from 'react';
import {Route, Switch} from 'react-router-dom';

import Dashboard from "../dashboard/dashboard";
import Invoicing from "../invoicing/invoicing";

class Content extends Component {
  render() {
    return(
      <Switch>
        <Route exact path="/Dashboard" component={Dashboard} />
        <Route path="/Invoicing" component={Invoicing} />
      </Switch>
    )
  }
};
export default Content

Upvotes: 2

Related Questions