Simple React Component not rendering after Routing

Question

I'm a beginner in React and I'm learning how to route. My page changes urls, but the view turns to a blank page. My index page is working fine. I don't have any console errors.

In Router.js

import React from "react";
import {
  BrowserRouter,
  Route,
  Switch,
} from "react-router-dom";
import App from './App'
import SinglePriceGrid from './component/SinglePriceGrid'

function Router() {
    return (
       <BrowserRouter>
            <Switch>
                <Route exact path="/" component={App} />
                <Route path="/single-page-grid" component={SinglePriceGrid} />
            </Switch>
       </BrowserRouter>
    )
}
export default Router

In SinglePriceGrid.js

import React from 'react';
import '../css/SinglePriceGrid.css'

class SinglePriceGrid extends React.Component {
    render() {
        return (
            <div className="SinglePriceGrid">
                <h1>Hello Single Price Grid!</h1>
            </div>
        );
    }
}
export default SinglePriceGrid;

edit: Added the imports I used

edit: Readded the Switch, but it did not solve the problem

can you share the code you use Router.js ? SinglePriceGrid probably not accessible after Routing. I might happen when it is guarded. — ilkerkaran, Apr 16 '20 at 13:31
@ilkerkaran I edited the post for what I did entirely for the file. My project is currently the default template except I changed the index.js to Router instead of App — madreloidpx, Apr 16 '20 at 13:36

score 0 · Answer 1 · answered Apr 16 '20 at 13:41

keep the Routes inside Switch. Try this

import React from "react";
import {
  BrowserRouter,
  Route,
  Switch,
} from "react-router-dom";
import App from './App'
import SinglePriceGrid from './component/SinglePriceGrid'

function Router() {
    return (
       <BrowserRouter>
            <Switch>
                <Route exact path="/" component={App} />
                <Route path="/single-page-grid" component={SinglePriceGrid} />
            </Switch>
       </BrowserRouter>
    )
}
export default Router

score 0 · Answer 2 · answered Apr 16 '20 at 13:53

0

I'm really sorry, but the error is really humiliating. My path is wrong. I used "page" instead of "price" for the endpoint.

answered Apr 16 '20 at 13:53

madreloidpx

89
6

Simple React Component not rendering after Routing

2 Answers2