How to use react-routers in reactjs
up vote
1
down vote
favorite
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'));
javascript reactjs react-router
New contributor
add a comment |
up vote
1
down vote
favorite
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'));
javascript reactjs react-router
New contributor
add a comment |
up vote
1
down vote
favorite
up vote
1
down vote
favorite
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'));
javascript reactjs react-router
New contributor
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'));
javascript reactjs react-router
javascript reactjs react-router
New contributor
New contributor
edited Nov 10 at 15:15
Billal Begueradj
5,501132637
5,501132637
New contributor
asked Nov 10 at 12:15
amit
61
61
New contributor
New contributor
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
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
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
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
add a comment |
up vote
0
down vote
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
add a comment |
up vote
0
down vote
up vote
0
down vote
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
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
edited Nov 10 at 13:43
answered Nov 10 at 13:23
Johuder Gonzalez
64336
64336
add a comment |
add a comment |
amit is a new contributor. Be nice, and check out our Code of Conduct.
amit is a new contributor. Be nice, and check out our Code of Conduct.
amit is a new contributor. Be nice, and check out our Code of Conduct.
amit is a new contributor. Be nice, and check out our Code of Conduct.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53238857%2fhow-to-use-react-routers-in-reactjs%23new-answer', 'question_page');
);
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password