Myujth

I am new in Reactjs and I want to use router but not working,displaying blank page.

How can I use router Home category and products.I put code in App.jsx and index.jsx but showing me blank page,how can I resolve this.

Following is my App.jsx code

/* Import statements */
import React, Component from 'react';
import Link, Route, Switch from 'react-router-dom';

/* Home component */
const Home = () => (
 <div>
 <h2>Home</h2>
 </div>
)

/* Category component */
const Category = () => (
 <div>
 <h2>Category</h2>
 </div>
)

/* Products component */
const Products = () => (
 <div>
 <h2>Products</h2>
 </div>
)

/* App component */
class App extends React.Component 
 render() 
 return (
 <div>
 <nav className="navbar navbar-light">
 <ul className="nav navbar-nav">

 /* Link components are used for linking to other views */
 <li><Link to="/">Homes</Link></li>
 <li><Link to="/category">Category</Link></li>
 <li><Link to="/products">Products</Link></li>

 </ul>
 </nav>

 /* Route components are rendered if the path prop matches the current URL */
 <Route path="/" component=Home/>
 <Route path="/category" component=Category/>
 <Route path="/products" component=Products/>

 </div>
 )
 

Here is my index.jsx code

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

import App from './components/App';
import './style.less';

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

You need to import a BrowserRouter and wrap the whole app code into that component for routes can react to url changes, so in your import react-router-dom

import BrowserRouter, Route, Link from “react-router-dom”

return (
 <BrowserRouter>
 <div>
 <nav className="navbar navbar-light">
 <ul className="nav navbar-nav">

 /* Link components are used for linking to other views */
 <li><Link to="/">Homes</Link></li>
 <li><Link to="/category">Category</Link></li>
 <li><Link to="/products">Products</Link></li>

 </ul>
 </nav>

 /* Route components are rendered if the path prop matches the current URL */
 <Switch>
 <Route path="/" component=Home/>
 <Route path="/category" component=Category/>
 <Route path="/products" component=Products/>
 </Switch>

 </div>
 </BrowserRouter>
)

Doing that you will get a working example, so BrowserRouter will listen for changes done into url and react that changes into its Route components, remember you should need pass to eachRoute component a property called exact=true or even better wrap all your Route components with Switch component, that prevent to display all Route when a change url is done, with Switch will render only the route that matches with the exact path