Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript React Router 4 Basics Getting Started with React Router Inline Rendering with <Route>

Posted by Mark Moulton
Mark Moulton
4,876 Points

BrowserRouter is not working as in video

BrowserRouter works for the root directory but when I go to /about I get an error saying cannot GET /about. I did some research and tried setting the basename property to "/" and no progress. I tried using HashRouter instead and it work perfect. Does anyone one know why? Does BrowserRouter assume server side routing?

Cole Logan
Cole Logan
4,582 Points
Cole Logan
Cole Logan
4,582 Points

same thing is happening to me WTF

Gonzalo Blasco
Gonzalo Blasco
10,405 Points

Do you still have this issue?

Sam Gutierrez
Sam Gutierrez
6,791 Points
Sam Gutierrez
Sam Gutierrez
6,791 Points

Similar experience.

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

//app component import Home from './Home' import Header from './Header' import About from './About' import Teachers from './Teachers' import Courses from './Courses'

const App = () => ( <BrowserRouter> <div className="container"> <Header /> <Route exact path="/" component={Home} /> <Route exact path="/About" component={About} /> <Route exact path="/Teachers" component={Teachers} /> <Route exact path="/Courses" component={Courses} /> {/* <Route path="/About" render={ () => <About />} /> <Route path="/teachers" render={() => <Teacher />} /> <Route path="/courses" render={ () => <Courses />} /> */} </div> </BrowserRouter> );

export default App;

4 Answers

kavinduwijesuriya
kavinduwijesuriya
3,103 Points
kavinduwijesuriya
kavinduwijesuriya
3,103 Points

If you can post the code I might be able to help

jonathan chadeyras
jonathan chadeyras
15,015 Points
jonathan chadeyras
jonathan chadeyras
15,015 Points

Your server has to be configured. By default when you enter an url the server gonna look for the appropriate page. If it can't find it, it will throw an error: Cannot GET /url

There is several way to tackle to problem, i Invite you to read this well documented article on stack https://stackoverflow.com/questions/27928372/react-router-urls-dont-work-when-refreshing-or-writting-manually

Sam Gutierrez
Sam Gutierrez
6,791 Points
Sam Gutierrez
Sam Gutierrez
6,791 Points

I am not sure why it happened but after scratching my head for a moment and searching for typos (and finding none) I went ahead and restarted my server (control + c, then npm start again). Immediately all the changes/routing were working. As a entry level developer I think I can safely say that occasionally things like this 'just happen' and restarting a server or webpack is a safe practice when you aren't exactly sure why your program isn't working as it should.

Matthew Burtonshaw
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Matthew Burtonshaw
Full Stack JavaScript Techdegree Graduate 17,153 Points
Matthew Burtonshaw
.a{fill-rule:evenodd;}techdegree seal-36
Matthew Burtonshaw
Full Stack JavaScript Techdegree Graduate 17,153 Points

I'm having the same issue. Restarted the server; no typos per Guil's instructions; still an error. Must be outdated syntax or something, Idk

Matthew Burtonshaw
.a{fill-rule:evenodd;}techdegree seal-36
Matthew Burtonshaw
Full Stack JavaScript Techdegree Graduate 17,153 Points

import React from 'react'; import { BrowserRouter, Route } from "react-router-dom"; import Header from "./Header"; import Home from "./Home"; import About from "./About"; import Teachers from "./Teachers"; import Courses from "./Courses";

const App = () => ( <BrowserRouter> <div className="container"> <Header /> <Route exact path = "/" component = {Home}/> <Route path = "/about" component = {About}/> <Route path = "/teachers" component = {Teachers}/> <Route path = "/courses" component = {Courses}/> <div/> </BrowserRouter> );

export default App;