I am trying to convert my HTML website into react , I've created header, footer and home page. Now I want to navigate to inner page on click of image on home page.
I used router and switch too but unable to call that page.
I am getting an error 'Listing' is not defined (page name is Listing)
I am adding the code too
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
import Listing from './Listing'
The above I added on top of my home page
<Link to='/app/listing'>
<a href="palm-valley.html" class="property-slider-img bg-xs" style={{backgroundImage: "url(" + "images/header/palm-valley-header.jpg" + ")",}}>
</a>
</Link>
This is how I added link
<Switch>
<Route path="/listing"><Listing/></Route>
</Switch>
And this is how I used switch
You are importing Listing as Inner, so you need to use <Inner />.
Change your import to
import Listing from './Listing'
Also to does not match any path, so change
<Link to='/listing'> ... <Link>
You don't need to but a <a></a> in your <Link></Link> you can add a className on the <Link></Link> if you want but it's not important
I saw that you have import Router but make sur that you use it like that:
<Router>
<Switch>
<Route/>
</Switch>
</Router>
Then you shouldn't use the <Route/> like that, here an exemple:
<Route
exact
key='/path'
path='/path'
render={(routeProps) => (<ComponentToRender/>)}
/>
And if they say that 'Listing' is not defined this is because you have not import it
Related
I have written a code which upon clicking the link routes to the view. But the links don't disappear. Please guide me on how I could only let the view be shown and not the links. I am sharing images for more clarification
App.js
import React, {Component} from 'react';
import {BrowserRouter, Route, Link, Routes} from 'react-router-dom';
import Buyer from './Container/Buyer/Buyer';
import Seller from './Container/Seller/Seller';
import classes from './App.css';
class App extends Component{
render(){
return(
<BrowserRouter>
<div className={classes.App}>
<p>Shop</p>
<ul>
<li><Link to='/buyer'>I want to Buy</Link></li>
<li><Link to='/seller'>I want to Sell</Link></li>
</ul>
<Routes>
<Route path="/buyer" element={<Buyer/>} />
<Route path="/seller" element={<Seller/>} />
</Routes>
</div>
</BrowserRouter>
)
}
}
export default App;
Initially, I want only the links and "shop" to appear and upon clicking one of the links the "shop" and links should disappear and the view must only appear.
But in my case, the "Shop " and links do not disappear upon clicking also initially the view of the buyer also appears which should appear only after clicking the link "I want to buy".
Please let me know if more description is required for this problem.
If you want the buyer to route to another view when he clicks on a link using <Link> then you need to specify which component to render when the path matches the current path. You may use "component" attribute.
<Router>
<Route path="/buyer" component={Buyer} />
<Route path="/seller" component={Seller} />
</Router>
Your 'import' needs to be changed to 'router'. The same to use in the jsx to wrap your routes.
import {BrowserRouter, Route, Link, Router} from 'react-router-dom';
You may use 'render' attribute to render jsx as a component through inline function. The difference between 'component' and 'render' attribute is
that component attribute remounts the component to be rendered each time the App component here is being evaluated.
You can read the official docs for more deails:
https://v5.reactrouter.com/web/api/Route
I'm currently working on a notes app in React and I've built a 404 page and now if I go to a route that doesn't exist it shows a 404 page
for example, if I go to the route /get-the-note/ I get a 404 page.
But the problem is that I have a route:
<Route exact path="/single-note/:id" component={Singlenote}></Route>
which needs an id and if I put the correct id like I have a note with id no 2 and if I go to the route /single-note/2 it works but if I put an id that doesn't exist like if I put an id 120 which doesn't exist and I go to the route /single-note/120 I get a plain page instead of a 404 page. I want it show the 404 page even if the id is incorrect
here is my app.js file:
import "./App.css";
import Homepage from "./components/homepage.component";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Singlenote from "./components/singlenote.component";
import PageNotFound from "./components/404_page";
function App() {
return (
<Router>
<Switch>
<Route exact path="/" component={Homepage} />
<Route exact path="/single-note/:id" component={Singlenote}></Route>
<Route path="*"><PageNotFound /></Route>
</Switch>
</Router>
);
}
export default App;
and here is my 404 page:
import React from 'react'
const PageNotFound = () => {
return (
<div id="wrapper">
<img src="https://i.imgur.com/qIufhof.png" />
<div id="info">
<h3>This page could not be found</h3>
</div>
</div >
)
}
export default PageNotFound
The router has no way of knowing which IDs do and do not exist.
It's up to your Singlenote to render 404 content if there is no such ID.
For the last route in the Switch, you don't need the path at all, by the way.
<Route component={PageNotFound} />
The approach I suggest for this is by modifying your Singlenote component, with a useEffect hook, that checks if the id provided exists or not, only once on mount (useEffect(() => { code for check }, []);). In the event that the id does not exist, you can redirect the execution to your 404 component, by using history (e.g. history.push('*'), where * is used as the path to redirect to, you could use something else that is not covered in the routes, so it will go to 404).
I have to add that this is not a good approach, I would personally go with a notification or other indicator displayed when accessing your Singlenote component with an id that does not exist (again with useEffect), which informs the user that no results or data were found for the given id.
So basically, I have a problem with react router not rendering my SystemSidebar. I want to scroll through my SystemSidebar components, but my problem is when I press on 'LinkSoundIcon' it redirects me to 'a new page' but that page doesnt render my systemSidebar . I want when I press on any of the links of my sidebar that my sidebar remains
import React from 'react'
import './SystemSidebar.css'
import SoundIcon from '#material-ui/icons/Computer';
import ComputerIcon from '#material-ui/icons/Computer';
import { BrowserRouter, Route, Switch, Link } from 'react-router-dom';
import Sound from './Sound';
import Computer from './Computer;
const SystemSidebar=()=> {
return (
<div className='system'>
<div className="sidebar">
<Link to='Sound'><VolumeUpIcon /></Link>
<h4> Sound</h4>
<Link to='Computer'><ComputerIcon /></Link>
<h4> Computer</h4>
</div>
</div>
);
};
import React,{Component} from 'react'
import Sound from './Sound';
import Computer from './Computer';
import SystemSidebar from './SystemSidebar';
class MainSystem extends Component {
render(){
return (
<div className="MAIN">
<BrowserRouter>
<SystemSidebar />
<Switch>
<Route exact path="/" component={SystemSidebar} />
<Route exact path="/Sound" component={Sound}/>
<Route exact path="/Computer" component={Computer}/>
</Switch>
</BrowserRouter>
</div>
);
}
}
export default MainSystem;
<Link to='/Sound'><VolumeUpIcon /></Link>
answer of your first problem and second if you want to access sidebar in each component then don't put it in switch route , simply put it outside the routing... or if u want to access it with specific route then try using nested routing
Okay, so it seems a little wonky with your copy pasting (I hope this is just a problem that stems from copy and pasting and it's not like that in your code). But your Problem is here:
<Route exact path="/Sound" component={Sound}/>
You're saying here that the route should be EXACTLY http://<your root uri>/Sound
You should also use this exact route in the link if you want to hit it, this means you need to have the slash there:
<Link to='/Sound'><VolumeUpIcon /></Link>
Update:
So according to your comment you want the sidebar to stay when you click a link. In this case, take a look at your code:
<Switch>
<Route exact path="/" component={SystemSidebar} />
<Route exact path="/Sound" component={Sound}/>
<Route exact path="/Computer" component={Computer}/>
</Switch>
You define here that the component SystemSidebar will only be loaded when you're at the Root directory ("/") of your App. It will be unloaded when you change that directory, for example, to "/Sound". SystemSidebar will be unloaded and Sound will be loaded instead.
Since your Sidebar should always be shown, it needs to be in your Main App and outside of your actual Router logic. Remember what the React Router does: It switches out components depending on which directory (which Sub-URL) you're in. It's best practice to have a Sidebar, an App Bar or similar things that are always there to be their own components. Your actual content should live in a separate container, where the needed component can be swapped out by the Router if need be. So something like this:
class MainSystem extends Component {
render(){
return (
<div className="MAIN">
<SystemSidebar />
<div className="ContentContainer">
<BrowserRouter>
<Switch>
<Route exact path="/Sound" component={Sound}/>
<Route exact path="/Computer" component={Computer}/>
{/* Route "/" should be last because it acts as fallback! */}
<Route exact path="/" component={StartPage} />
</Switch>
</BrowserRouter>
</div>
</div>
);
}
}
That's pretty basic but I hope you get the gist of it.
Also, I'd encourage you to take a look at an UI framework like Material UI for example. It already provides components ready for use (like your Sidebar which is called Drawer there), it's mobile first and easy to use with responsive design.
The code below will render a link that I can click on, and when I click on it, I can see the URL changing to have /japanese_game for the URL path. However... nothing appears to change on the page, the link that says "Japanese" is still there, unchanged. It should display the other stuff in <Route path="/japanese_game">, or rather, that's what I would like it to do.
What am I doing wrong?
import React from 'react';
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
import './App.css';
function App() {
return (
<div className="App container">
<Router>
<Switch>
<Route path="/">
<Link to="/japanese_game">
<div className="language-option">
Japanese
日本語
</div>
</Link>
</Route>
<Route path="/japanese_game">
<h1>Japanese Game</h1>
<Link to="/">
Go back
</Link>
</Route>
</Switch>
</Router>
</div>
);
}
export default App;
Change the order, it compares and selects on the basis of which matches first. put the Route with "/japanese_game" first.
The <Switch> component render the first route he match (doc).
When you go to /japanese_game, you also hit / route, so he render the component under the / route.
To prevent that, you have 2 options:
Add an exact props to your route / : <Route exact path="/"> (hightly recommanded)
Change the ordre of your route (not recommanded at all)
Change the order of the routes or alternatively use an "exact" flag.
<Route exact path="/japanese_game">
I'm using React for developing a website, and I have some images that I want them to be clickable to other pages using react router. I already have made a header using routers but the same code system does not work for images. this is my code:
This is inside the page that I want the images to be inside (Gewalt.js):
import { Link } from 'react-router-dom'
<center>
<img src={Phys} className='img' alt='Phys' ><Link
to='/src/GewaltContent/Physische.js'> </Link></img>
</center>
And this is my App.js Page:
import Gewalt from './Header/Gewalt'
import Physische from './GewaltContent/Physische'
import Psychische from './GewaltContent/Psychische'
import Strukturelle from './GewaltContent/Strukturelle'
import { BrowserRouter as Router, Route } from 'react-router-dom'
<Route path='/src/GewaltContent/Physische.js' component={Physische} />
<Route path='/src/GewaltContent/Psychische.js' component={Psychische} />
<Route path='/src/GewaltContent/Strukturelle.js' component={Strukturelle} />
The rest of the links are for the router header I made before with this method and it works fine, but when I try this for the images I just get a blank page in the Gewalt.js page. what is the correct method?
Wrap img tag inside Link tag:
<Link to='/src/GewaltContent/Physische.js'>
<img src={Phys} className='img' alt='Phys' />
</Link>