CODEWITHSUNDEEP
javascriptreactjsreact-dom
user3903517
user3903517

Reputation: 77

The links do not render the components of ReactJS. The URL changes but the page does not?

Here is my main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
import Home from './Home.jsx';
import Contact from './Contact.jsx';
import About from './About.jsx';
import { BrowserRouter as Router, Route, IndexRoute } from 'react-router-dom';
import {history } from 'history';

ReactDOM.render(  (
<Router history = {history}>
    <Route path = "/" component = {App}>
        <IndexRoute component = {Home} />
        <Route path = "/home" component = {Home} />
        <Route path = "about" component = {About} />
        <Route path = "contact" component = {Contact} />

    </Route>
</Router>
), document.getElementById('app'));

Here is my App.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import { Link } from 'react-router-dom';

class App extends React.Component {
render() {
  return (
    <div>
        <ul>
            <li><Link to = "/home">Home</Link></li>
            <li><Link to = "/about">About</Link></li>
            <li><Link to = "/contact">Contact</Link></li>
        </ul>
        {this.props.children}
    </div>
  )
 }
}
export default App;

Here is my About.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class About extends React.Component {
render() {
    return (
        <div>
            <h1>About...</h1>
        </div>
    )
   }
}

export default About;

Here is my index.html

<!DOCTYPE html>
<html lang = "en">

<head>
    <meta charset = "UTF-8">
    <title>React App</title>
</head>

<body>
    <div id = "app"></div>
    <script src = "index.js"></script>
</body>
</html>

The code renders in browser. - Home - About - Contact

Question :- When i click the link About the url changes to (http://localhost:8080/about) on the browser link. But the About.jsx page is not shown. I do not know the reason why? Kindly Help.

Upvotes: 0

Views: 546

Answers (1)

Denialos
Denialos

Reputation: 1006

You forgot to prefix your route names with a slash (/).

UPDATE: also, remove the .jsx extension from your import paths. See below:

import App from './App';
import Home from './Home';
import Contact from './Contact';
import About from './About';

ReactDOM.render(  (
<Router history = {history}>
    <Route path = "/" component = {App}>
        <IndexRoute component = {Home} />
        <Route path = "/home" component = {Home} />
        <Route path = "/about" component = {About} />
        <Route path = "/contact" component = {Contact} />

    </Route>
</Router>
), document.getElementById('app'));

Upvotes: 2

Related Questions