I want to load content on new fresh page after clicking on button.
After clicking on create New button I want load RP GrdgrdreRoup Header on top of the page. Bsically i want to load a new page on clicking of create new button
This is my filter.js file:
import React from 'react';
import {setFilterText} from '../../actions/Filter';
import {connect} from 'react-redux';
import {Link} from 'react-router-dom';
const Filter = (prop) => {
return(
<div className="page-container">
<div className="page-content-wrapper">
<div className="page-head">
<div className="container-fluid filter_height">
<div className="form-inline actions">
<h1 className="">Quotations</h1>
<div className="create_new">
<Link to="/form">
<button type="button" className="btn btn-primary btn-sm pull-right">Create New</button>
</Link>
</div>
</div>
</div>
</div>
</div>
</div>
)
}
export default connect()(Filter)
This is my router.js file:
import React from 'react';
import {BrowserRouter, Route, Switch,} from 'react-router-dom';
import Quotation from '../components/QuotationList/Quotation';
import Header from '../components/common/Header';
import CreateQuotation from '../components/CreateQuotation/CreateQuotation';
const AppRouter= ()=>(
<BrowserRouter>
<div>
<Header/>
<Switch>
<Route path="/quotation" component={Quotation} exact={true}/>
<Route path="/form" component={CreateQuotation} exact={true}/>
</Switch>
</div>
</BrowserRouter>
);
export default AppRouter
Path is not set correctly.
const AppRouter= ()=>(
<BrowserRouter>
<div>
<Header/>
<Switch>
<Route path="/quotation" component={Quotation} exact={true}/>
<Route path="/form" component={CreateQuotation} exact={true}/>
</Switch>
</div>
</BrowserRouter>
);
When you click on the create new button, write this.props.history.push('/form'); and remove Link tag above it.
Related
I have this this App.js
import './App.css';
import React from 'react'
import Navbar from './COMPONENTS/Navbar'
import Body from './COMPONENTS/Body'
import Menu from './COMPONENTS/Menu';
import './COMPONENTS/Body.css'
import Data from './COMPONENTS/Data' ;
import {
BrowserRouter,
Routes,
Route,
} from "react-router-dom";
import Cakebody from './COMPONENTS/Cakebody';
import Customize from './COMPONENTS/Customize';
import Surprise from './COMPONENTS/Surprise';
import Surpriseone from './COMPONENTS/Surpriseone';
import Birthday from './COMPONENTS/Birthday';
import Flowers from './COMPONENTS/Flower';
import Gotocart from './COMPONENTS/Gotocart';
const App = () => (
<>
{/* const { productItems } = data ; */}
<BrowserRouter>
<Navbar />
<Menu />
<Routes>
<Route className="check" path='/' element={<Body title="All Items" />}></Route>
<Route className="check" path='/cakes' element={<Cakebody title="Same Day Cake" />}></Route>
{/* <Route path="/cart" component={Gotocart} /> */}
{/* <Route className="check" path='/cart' element={<Gotocart/>}></Route> */}
<Route className="check" path='/Customize' element={<Customize title="Customization Cake" />}></Route>
<Route className="check" path='/anniversary' element={<Surprise title="Anniversary cakes" />}></Route>
<Route className="check" path='/surprise' element={<Surpriseone title="Surprise Cake" />}></Route>
<Route className="check" path='/birthday' element={<Birthday title="Birthday Cakes" />}></Route>
<Route className="check" path='/flowers' element={<Flowers title="Flowers" />}></Route>
</Routes>
</BrowserRouter>
</>
);
export default App;
And I want to click on the cart and want to move to a different page with no navbar , body and all
That page is this
import React from 'react'
import images from './assets/cake21.jpeg'
import image1 from './assets/cake53.jpeg'
import image2 from './assets/cake61.jpeg'
import image3 from './assets/cake81.jpeg'
import image4 from './assets/cake78.jpeg'
import flower16 from './assets/flower16.jpeg'
import Pricetag from './Pricetag'
import Gotocart from './Gotocart'
import { Link } from 'react-router-dom'
export default function Menu() {
return (
<div>
<div className="location sample">
<i class="fa-solid fa-location-dot favicon"></i>
We operate in NOIDA and DELHI only.
<div className="go">
<a href="Gotocart.jsx">
<i class="fa-solid fa-cart-shopping"></i>
</a>
</div>
</div>
<hr className="line" />
{/* <hr className="line" /> */}
<div className="about-us">
You can share your designs on WhatsApp
<i class="fa-brands fa-whatsapp"></i>
<a href="https://wa.me/<>" target='_blank' rel="noreferrer" className='no'></a>
we can make the same on the cake.
</div>
<hr className="line" />
<div className="main-head">
<div className="new-head">Menu</div>
<div className="info">
Click on the images to see the list below
</div>
<div className="container22">
{/* <div className="con112"> */}
<Link to='/cakes' className="menulink con112 ">
<img src={images} alt="" className='img12' />
<div className='name1' >Same Day Cakes</div>
</Link>
{/* </div> */}
</div>
</div>
</div>
)
}
What should I change in these files to move to a new page when I click on the cart icon.
Current code just works like react router and menu nad navbar are right there, I want to remove that also
Simple you can create a Layout and use that Layout whenever you need based on the pages.
Example:
Layout.js
const Layout = (props) => {
return(
<>
<Navbar />
<Menu />
{props.children}
</>
)
}
Home.js
import Layout from './Layout';
const Home = (props) => {
return(
<Layout>
<h1>Home Page </h1>
</Layout>
)
}
About.js
import Layout from './Layout';
const About = (props) => {
return(
<Layout>
<h1>About Page </h1>
</Layout>
)
}
Wrap Navbar and Menu as explained by another answer into a component like this.
const Layout = (props) => {
return(
<>
<Navbar />
<Menu />
{props.children}
</>
)
}
Wrap other components having navbar with the layout component.
<BrowserRouter>
<Navbar />
<Menu />
<Routes>
<Route className="check" path='/' element={<Layout><Body title="All Items" /></Layout>}></Route>
<Route className="check" path='/cakes' element={<Layout><Cakebody title="Same Day Cake" /></Layout>}></Route>
<Route path="/cart" component={Gotocart} />
{/* rest of the code same way */}
</Routes>
</BrowserRouter>
This is my first reactjs application and I have an issue with the navigation. When I try to navigate via url .../posts or ../home only the main App page is showing up. How can I fix this? Thank you in advance!
I have App main page where user can Login or Register:
import React,{useState, useEffect} from 'react';
import {Register} from './subcomponents/Register';
import {Login} from './subcomponents/Login';
export function App() {
return (
<div className="root">
<Login />
<p>Hi {name}</p>
<Register/>
</div>
);
}
Home page, when the user is logged in to be redirected:
import React from 'react';
import { Posts } from './Posts';
import {Home} from './Home.jsx';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import {Nav} from './Nav';
export function Home(){
return(
<div id="home">
<BrowserRouter>
<Nav/>
<Routes>
<Route path='/home' element={<Home/>}/>
<Route path="/posts" element={<Posts/>}/>
</Routes>
</BrowserRouter>
<h3>This is the home page</h3>
</div>
)
}
Nav component:
import React from 'react';
import {Link} from 'react-router-dom'
import '../css/nav.css';
import Logo from '../images/Logo.png';
export function Nav(){
return(
<div id="nav">
<img src={Logo} className="nav-logo" alt="logo"/>
<ul>
<li>
<Link to="/home">Home</Link>
</li>
<li>
<Link to="/posts">Posts</Link>
</li>
</ul>
</div>
)
}
for access to components in the project by url,it need be to render before.
export function App(){
return(
<BrowserRouter>
<div id="app">
<Routes>
<Route path='/home' element={<Home/>}/>
<Route path="/posts" element={<Posts/>}/>
</Routes>
</div>
</BrowserRouter>
)
}
Good morning community StackOverflow.I had to use the route to access some component inside the application but that's not work for me despite I had installed the "npm install react-router-dom" the browser render me a blank file,so this is all my file :
app.js file :
import React from 'react';
import HomeScreen from './screens/HomeScreen';
import ProductScreen from './screens/ProductScreen';
import {BrowserRouter, Route, Switch} from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<div className="grid-container" >
<header className="row" >
<div>
<a className="brand" href="/">My Shop</a>
</div>
<div>
Cart
Sign In
</div>
</header >
<main>
<Route path="/" component={HomeScreen} ></Route>
<Route path="/product/:id" component={ProductScreen} ></Route>
</main>
<footer classNameName="row center" >All right reserved</footer>
</div>
</BrowserRouter>
);
}
export default App;
this is the HomeScreen file :
import React from "react";
import {data} from '../data';
import Product from '../components/Product';
function HomeScreen () {
return (
<div>
<div className="row center">
{data.products.map((product) => (
<Product key={product._id} product={product} ></Product>
))}
</div>
</div>
)
};
export default HomeScreen;
this is the ProductScreen file :
import React from "react";
function ProductScreen () {
return (
<div>Product Screen</div>
)
};
export default ProductScreen;
this is the Product file code:
import React from 'react';
import Rating from './Rating';
function Product (props) {
const {product} = props;
return (
<div className="card">
<a href="product.html">
<img className="medium" src={product.image} alt={product.name} />
</a>
<div className="card-body">
<a href="product.html">
<h2>{product.name}</h2>
</a>
<Rating rating={product.rating} numReviews={product.numReviews} ></Rating>
<div className="price" >${product.price}</div>
</div>
</div>
)
}
export default Product;
In react router v6, lots of keywords have changed. In addition, various functions like useHistory have also been changed. Check the package version in package.json file. You can also check your browser console for errors.
In case you have v6 or above, change your app.js as below, to make it work. I have changed the react router keywords, indented code and made Route tag as self closing.
import React from 'react';
import HomeScreen from './screens/HomeScreen';
import ProductScreen from './screens/ProductScreen';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
function App() {
return (
<Router>
<div className="grid-container" >
<header className="row" >
<div>
<a className="brand" href="/">My Shop</a>
</div>
<div>
Cart
Sign In
</div>
</header>
<main>
<Routes>
<Route path="/" element={<HomeScreen />} />
<Route path="/product/:id" element={<ProductScreen />} />
</Routes>
</main>
<footer classNameName="row center" >All right reserved</footer>
</div>
</Router>
);
}
export default App;
If you're using version 6, you have to wrap <Route> components with <Routes> (you should import the component first), otherwise, wrap them with <Switch> component
import {BrowserRouter , Route} from 'react-router-dom';
import React from 'react';
import HomeScreen from './screens/HomeScreen';
import ProductScreen from './screens/ProductScreen';
function App() {
return (
<BrowserRouter>
<div className="grid-container">
<header className="row">
<div>
<a className="brand" href="index.html">SanaMall.</a>
</div>
<div>
<a className="link" href="/cart"> Cart</a>
<a className="link" href="/signin"> Sign In</a>
</div>
</header>
<main>
<Route path= "/" component={HomeScreen}/>
<Route path="/product/:id" component={ProductScreen}/>
</main>
<footer className="row center">
All rights reserved.
</footer>
</div>
</BrowserRouter>
);
}
export default App;
So my problem is that when i put exact path on the component HomeScreen, it doesnt render anything and then the ProductScreen only appears on the browser. Then if the HomeScreen shows in the brower, whenever i clicked on a product, it only refreshes the HomeScreen and it doesn't show the ProductScreen.
Hope you guys could help me. This have been my problem for almost 3 days.
If this code can't work let me know
import {BrowserRouter ,Switch, Route} from 'react-router-dom';
import React from 'react';
import HomeScreen from './screens/HomeScreen';
import ProductScreen from './screens/ProductScreen';
function App() {
return (
<BrowserRouter>
<div className="grid-container">
<header className="row">
<div>
<a className="brand" href="index.html">SanaMall.</a>
</div>
<div>
<a className="link" href="/cart"> Cart</a>
<a className="link" href="/signin"> Sign In</a>
</div>
</header>
<Switch>
<Route exact path="/" >
<HomeScreen />
</Route>
<Route path="/product/:id">
<ProductScreen />
</Route>
</Switch>
<footer className="row center">
All rights reserved.
</footer>
</div>
</BrowserRouter>
);
}
export default App;
Use Switch to exclusively render each route https://reactrouter.com/core/api/Switch
Considering this React function:
import React from 'react';
import { BrowserRouter, Route, Link } from 'react-router-dom'
import HomeScreen from './Screens/HomeScreen'
import './App.css';
import currentStrings from './utils/currentlang'
function App() {
const currentlang = currentStrings;
const switchLanguage = () =>{
console.log("switching...");
currentlang.switchLang();
}
return (
<BrowserRouter>
<div className="grid-container">
<header className="header">
<div className="brand">
<Link to="/" >
</Link>
</div>
<div className="header-side">
{currentlang.getCurrent.subtitle}
</div>
<div className="header-right">
<button onClick={switchLanguage}> {currentlang.getCurrent.traduction} </button>
</div>
<div>
</div>
</header>
<main className="main">
<div className="content">
<Route path="/" exact={true} component={HomeScreen} />
</div>
</main>
<footer className="footer">
© 2020
</footer>
</div>
</BrowserRouter>
);
}
export default App;
i want to switch the language when i click on the button, the function itself changes a variable that contains the list of html text. However, all the research has given me solutions by using classes to change the state of my page, but my project is functional and doesn't work in my context.