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

Posted by Sonya Trachsel
Sonya Trachsel
13,674 Points

Two problems trying to implement React routes

  1. It only returns the component matching the path="/", every other route returns null.
  2. localhost.com/contact says Cannot get /contact. Only when I add a # in the url it works.

How do I solve these two problems? I haven't been able to find any documentation on this. Thank you!

My code

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

import Welcome from './pages/Welcome.jsx';
import Contact from './pages/Contact.jsx';

const App = () => (
  <BrowserRouter>
    <div className="container">
      <Route path="/" component={Welcome}/>
      <Route path="/contact" component={Contact}/>
    </div>
  </BrowserRouter>
);

import React from 'react';
import { render } from 'react-dom';

//css
import './sass/style.scss';
//routes
import App from './components/App.jsx';

render(<App/>, document.getElementById('container'));
Jawann Carmona
Jawann Carmona
19,556 Points
Jawann Carmona
Jawann Carmona
19,556 Points

Just throwing things out there. Have you tried using "exact path" rather than just "path"? I don't know if that'll help but might be worth a try for your first problem.

It looks like you are importing Contact but are you exporting it from the Contact.jsx?

Also. I don't believe you have to put the '.jsx' on the end of your filenames.

I don't know if any of this is helpful. Just offering some options.