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
Related
use React nested route, Home is the parent and News is the child. under root directory,there is "src" folder, in "src", is "pages" folder, in "pages", are "Home" and "News" folder. In "News", there is index.js:
Directory Structure :
| src/
| -- pages/
| ----- Home/
| --------index.js
| ----- News/
| --------index.js
| -- App.js
News/index.js
import React from 'react'
export default class News extends React.Component {
render(){
return(
<div style={{backgroundColor:'green',padding:10}}>
this is content of child subcomponent
</div>
)
}
}
Home/index.js
import React from 'react'
import {BrowserRouter as Router,Route,Routes} from 'react-router-dom'
import News from '../News'
export default class Home extends React.Component {
render(){
return(
<div style={{backgroundColor:'skyblue',padding:10}}>
home
<Routes>
<Route path = '/home/news' element={<News/>}></Route>
</Routes>
</div>
)
}
src/App.js
import './App.css';
import {BrowserRouter as Router,Route,Link,Routes} from 'react-router-dom'
import {Button} from 'antd-mobile'
import Home from './pages/Home'
import CityList from './pages/CityList'
import React from 'react';
function App() {
return (
<Router>
<div className="App">
<ul>
<li><Link to='/home'>home</Link></li>
<li><Link to='/citylist'>citylist</Link></li>
</ul>
<Routes>
<Route path='/home' element={<Home/>}/>
<Route path='/citylist' element = {<CityList/>}/>
</Routes>
</div>
</Router>
);
}
export default App;
when the program running, as the web site is http://localhost:3000/home,it is ok, but when I add news after the website, http://localhost:3000/home/news , the child component has not been shown correctly, that is no "this is content of child subcomponent" displayed, could you please tell me why and how to solve it.
I guess you are probably using react router 6. In that case you need to use Outlet in order to render nested child routes.
import React from "react";
import { BrowserRouter, Routes, Route, Link, Outlet } from "react-router-dom";
import "./styles.css";
function News() {
return (
<div style={{ backgroundColor: "green", padding: 10 }}>
this is content of child subcomponent
</div>
);
}
function Home() {
return (
<div style={{ backgroundColor: "skyblue", padding: 10 }}>
home
{
// Render child route.
}
<Outlet />
</div>
);
}
function CityList() {
return (
<div>
<p>City list</p>
</div>
);
}
export default function App() {
return (
<BrowserRouter>
<div className="App">
<ul>
<li>
<Link to="/home">home</Link>
</li>
<li>
<Link to="/citylist">citylist</Link>
</li>
</ul>
<Routes>
<Route path="/home" element={<Home />}>
{
// Nested Child Route.
}
<Route path="news" element={<News />} />
</Route>
<Route path="/citylist" element={<CityList />} />
</Routes>
</div>
</BrowserRouter>
);
}
I have a problem with my page that I build. There is main route path like "/" where is all page but there is also route path "/privacy" where you can go by clicking button "Privacy policy". Main navigation and footer with navigation are displaying at "/" and "/privacy" also.
It looks like this:
<Route exact path="/">
<Header />
<Main />
<Footer />
</Route>
<Route path="/privacy">
<Header />
<Privacy />
<Footer />
</Route>
The Main component looks like this
const Main = () => {
return (
<>
<Hello />
<Services />
<Projects />
<About />
<Contact />
</>
)}
All buttons in nav are react-scroll links.
<ul>
<li><Link to="header" smooth="true" duration={1000}>Main</Link></li>
<li><Link to="services" smooth="true" duration={1000}>Services</Link></li>
<li><Link to="webdev" smooth="true" duration={1000}>Portfolio</Link></li>
<li><Link to="about" smooth="true" duration={1000}>About</Link></li>
<li><Link to="contact" smooth="true" duration={1000}>Contact</Link></li>
</ul>
How can I redirect user from "/privacy" and scroll to - for example - about component at my "/" route path when he clicks "About" button in nav?
Example:
User is at "/privacy" and he wants to read "About" section, so he clicks button "About" in nav and then website is redirecting to "/" and scrolling to "About" section.
So. Add to component / root element of component about id="about" and then in your link set path <Link to="/#about"......
You can find info how to make links to content on the same page here (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a)
I used HashLink from the library react-router-hash-link. I simulated the home sections with two components Component1 and Component2 in order to make it more generic.
It's necessary install two packages
npm install react-router-dom
npm install react-router-hash-link
Here is the code:
Set the routes in the App.jsx
App.jsx
import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import { Home } from "./components/Home";
import { Component0 } from "./components/Component0";
function App() {
return (
<Router>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/component0" element={<Component0 />} />
</Routes>
</Router>
);
}
export default App;
Home contains Component1 and Component2 and a button for navigating to Component0
Home.jsx
import React from 'react';
import { Component1 } from './Component1';
import { Component2 } from './Component2';
import { HashLink } from 'react-router-hash-link';
export const Home = props =>
{
return (<>
<HashLink to="/component0">
<button>Button component 0</button>
</HashLink>
<Component1/>
<Component2/>
</>);
}
The Component0 is a separated section from which we can navigate to Component1 or Component2 by scrolling within the Home component. To navigate we use the HashLink with a wrapped button
Component.jsx
import React from 'react';
import { HashLink } from 'react-router-hash-link';
export const Component0 = props =>
{
return (<>
<HashLink smooth to="/#section-component1">
<button>Component1</button>
</HashLink>
<HashLink smooth to="/#section-component2">
<button>Component2</button>
</HashLink>
</>);
}
Component1 and Component2
Component1.jsx
import React from 'react';
import "./Component1.css"
export const Component1 = props =>
{
return (<>
<section id="section-component1">
<h1>Section of component 1</h1>
</section>
</>);
}
Component2.jsx
import React from 'react';
import "./Component2.css"
export const Component2 = props =>
{
return (<>
<section id="section-component2">
<h1>Section of component 2</h1>
</section>
</>);
}
Repo: https://github.com/JCaeta/react-navigation
so i had a navbar component that has a <Link></Link> inside of it the problem in i couldn't use that link for the router (it wont refresh) when i clicked on it although the link appears on the URL but it didn't refresh
here's the code
import React, { Component } from 'react'
import {BrowserRouter as Router} from 'react-router-dom'
import Route from 'react-router-dom/Route'
import Nav from './Nav'
export class App extends Component {
render() {
return (
<div className="App">
<Router>
{/* NAVBAR */}
<Nav />
<Route path="/" exact render={
() => <h1>home</h1>
}/>
<Route path="/about" exact render={
() => <h1>about</h1>
}/>
<Route path="/author" exact render={
() => <h1>author</h1>
}/>
</Router>
</div>
)
}
}
export default App
and here's the navbar code
import React, { Component } from 'react'
import styles from './Nav.module.css'
import {BrowserRouter as Router} from 'react-router-dom'
import {Link} from 'react-router-dom'
export class Nav extends Component {
render() {
return (
<Router>
<div className={styles.nav}>
<div className="container">
<div className={styles.navgrid}>
<img className={styles.image} src="/img/actualLogo#1x.svg" alt="?"/>
<ul className={styles.ultest}>
<li><Link to="/">Home</Link></li>
<li><Link to="/updates">Updates</Link></li>
<li><Link to="/author">Author</Link></li>
</ul>
</div>
</div>
</div>
</Router>
)
}
}
export default Nav
I'm assuming it's because it's not on the same <Router></Router> but does anyone have a way to make this work?
You're creating a new <Router>, which has no defined <Route> elements within it. Remove that router:
export class Nav extends Component {
render() {
return (
<div className={styles.nav}>
<div className="container">
<div className={styles.navgrid}>
<img className={styles.image} src="/img/actualLogo#1x.svg" alt="?"/>
<ul className={styles.ultest}>
<li><Link to="/">Home</Link></li>
<li><Link to="/updates">Updates</Link></li>
<li><Link to="/author">Author</Link></li>
</ul>
</div>
</div>
</div>
)
}
}
Each component doesn't need its own <Router>, as long as they're all contained within (descendants of) the one defined in <App>.
I am just practicing how react-router works.
This is my App.js in which see message route
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import logo from './logo.svg';
import './App.css';
import styled, { css } from 'styled-components';
import About from './components/About';
import Home from './components/Home';
import Messages from './components/Messages';
const Ul = styled.ul`
list-style-type: none;
padding: 0;
margin: 0;
background-color: #282c34;
`;
function App() {
return (
<div className='App'>
<header className='App-header'>
<img src={logo} className='App-logo' alt='logo' />
<div>welcome to React</div>
</header>
<Ul>
<Li>
<NewLink to='/'>Home</NewLink>
</Li>
<Li>
<NewLink to='/messages'>Messages</NewLink>
</Li>
<Li>
<NewLink to='/about'>About</NewLink>
</Li>
</Ul>
<Container>
<Route exact path='/' component={Home} />
<Route exact path='/messages' component={Messages} />
<Route exact path='/about' component={About} />
</Container>
</div>
);
}
export default App;
when route switched to messages route messages get rendered
**This is messages Route **
import React from 'react';
import { Route } from 'react-router-dom';
import { Li, NewLink } from '../App';
import Message from './Message';
const Messages = ({ match }) => (
<div>
<ul>
{[...Array(5).keys()].map((n) => (
<Li key={n}>
<NewLink primary to={`${match.url}/${n + 1}`}>
Message {n + 1}
</NewLink>
</Li>
))}
</ul>
<Route path={`${match.url}/:id`} component={Message} />
</div>
);
export default Messages;
**This is message route but it is not rendering below Messages Route **
**can anyone please tell what is the problem **
import React from 'react';
const Message = ({ match }) => <h3>Message with ID {match.params.id}</h3>;
export default Message;
The issue here is the presence of exact prop on route /messages
Now when you have the exact prop on Route, unless the path matches exactly the Route is not rendered and hence the child Routes will never be evaluated.
A better practise is to use Switch component which renders the first matching Route and re-order the Routes so that prefix paths are the end
<Switch>
<Route path='/messages' component={Messages} /> // no exact props
<Route path='/about' component={About} />
<Route path='/' component={Home} /> // home route rendered at the end
</Switch>
Also on a sidenote, in order to define paths on Routes, you must use match.path instead of match.url
I have a sidebar and a TopNav that I render inside App component.
My hierarchy is like
Index > App > SideBar [> Lnks] = TopNav [> Links] = Content
I mean to say My App is rendered inside Index. Inside App, there are 3 Components named Topnav, SideNav, Content .
I want Topnav ,Sidenav to be available everytime but the linkes given in these navs should be rendered inside the Content. How am I supposed like this?
Below is my App.js
class App extends React.Component {
render() {
return (
<div>
<SideNav /> //SideNav should be rendered always
<TopNav /> //This one too
<div className={'content'}>
Render All the data from the links in Sidenav and Topnav here.
</div>
</div>
);
}
}
and my index.js looks like the code below
ReactDOM.render(
<App/>, document.getElementById('root'));
Here's the exact demo of what I want to do.
I just want to know the Routing configuration. What and where to put routing configurations
This app.js work
import React from 'react';
import { Switch, Route } from 'react-router-dom';
import SideNav from './Components/SideNav';
import TopNav from './Components/TopNav';
import Home from './Components/Home';
import Stuff from './Components/Stuff';
import Noroute from './Components/Noroute';
function App() {
return (
<div className="App">
<SideNav/>
<TopNav/>
<Switch>
<Route exact path='/' component={Home} />
<Route path='/stuff' component={Stuff} />
<Route component={Noroute} />
</Switch>
</div>
);
}
export default App;
and create folder Components and add your components
SideNav.js
import React from "react";
import { Link } from 'react-router-dom';
class SideNav extends React.Component {
render(){
return (
<div>
<ul className="navbar-nav mr-auto">
<li><Link to={'/'} className="nav-link"> Home </Link></li>
<li><Link to={'/stuff'} className="nav-link">Stuffs</Link></li>
</ul>
</div>
)
}
}
export default SideNav;