0

I'm following an online React tutorial. In the tutorial React Router 3 used while I got React Router 4 when I downloaded React Router (and react-router-dom). The code in the tutorial looks like this.

import React from "react";
import {render} from "react-dom";
import {Router, Route, browserHistory} from 'react-router'

import {Root} from "./components/Root";
import {Home} from "./components/Home";
import {User} from "./components/User";

class App extends React.Component {
    render() {
        return (
            <Router>
                <Route path={"user"} component={User}/>
                <Route path={"home"} component={Home}/>
            </Router>
        );
    }
}

render(<App />, window.document.getElementById('app'));  

I'm trying to rewrite the code to work with React Router 4 like this:

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

import {Root} from "./components/Root";
import {Home} from "./components/Home";
import {User} from "./components/User";

class App extends React.Component {
    render() {
        return (
            <BrowserRouter>
                <Switch>
                    <Route path={"user"} component={User}/>
                    <Route path={"home"} component={Home}/>
                </Switch>
            </BrowserRouter>
        );
    }
}

render(<App />, window.document.getElementById('app'));

The code for User.js looks like this:

import React from "react";

export class User extends React.Component {
    render() {
        return (
            <div>
                <h3>The User Page</h3>
                <p>User ID: </p>
            </div>
        );
    }
}

When I try localhost:8080/user it returns nothing.

I only get

<div id="app">
    <!-- react-empty: 1 -->
</div>

What is it I need to change in my code?

1
  • 2
    Try <Route path="/user" component={User}/> Commented Jun 20, 2017 at 10:54

2 Answers 2

1

Try with

<Route path="/user" component={User}/>
Sign up to request clarification or add additional context in comments.

6 Comments

Why post the same answer as the comment above, there is absolutely no difference,
Sorry I haven't seen your answer, I upvote your answer and ask @g3blv to uncheck this as accepted answer, then I will delete the post
Thats, OK. you can add more explanation to the answer and get the credit :)
@ShubhamKhatri Welcome to the Stackoverflow, this is how it works :)
@ummahusla, Thanks fo the heads up, but I know how it works. The other person did not any information over my already written comment, thats the reason I had replied
|
0

I have answered this Issue here

Wrap your <App> in <BrowserRouter> in index.js

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.