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>
Related
I'm trying to redirect to page onclick of a button from my main page App.js, But my redirected page /SelectAirport does not seem to load.
I think there might be something with the link path but I can't figure out how to fix it.
TLDR: The link changes but the content does not load.
App.js
function App() {
return(
<div>
<Button>
<Link to="./SelectAirport">Select Airport</Link>
</Button>
</div>
)
}
export default App;
Full Code here - https://codesandbox.io/s/boring-chihiro-zckfr5?file=/App.js:152-355
Where is your route? You have to first create a route for select-airport or something like that. Currently, you are just trying to load a component directly.
The route might look like this:
import SelectAirport from "./SelectAirport";
<Route path="select-airport" element={<SelectAirport />} />
After this, Link will start to work, and for your case this link should be something like:
<Link to="/select-airport">Select Airport</Link>
So, whenever, it hit select-airport, it will try to find the matching component via route and load that componet.
basic example can be found here. https://v5.reactrouter.com/web/example/basic (v5)
https://reactrouter.com/docs/en/v6/getting-started/overview (v6)
v6 code sample: https://stackblitz.com/github/remix-run/react-router/tree/main/examples/basic?file=src%2FApp.tsx
Use Routes and Route , inside of Route define your component and path for example path='/airports'
import { Button } from "#mui/material";
import React from "react";
import { NavLink } from "react-router-dom";
import SelectAirport from "./SelectAirport";
import {
Routes,
Route,
} from "react-router-dom";
function App() {
return(
<div>
<Button>
<NavLink to="/airports">Select Airport</NavLink>
</Button>
<Routes>
<Route path='/airports' element={<SelectAirport/>} />
</Routes>
</div>
)
}
export default App;
Sandbox example Working example
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
I have searched everywhere for the answer to this one - and I'm pretty sure it's the way I've laid out my Components in my React app:
In making my Portfolio page in React, I used CREATE REACT APP and after it was finished and functioning perfectly locally, I made the necessary changes to the package.json file for homepage and build, etc. Then when I deployed using Yarn, the host link would open my site - but without one of my components: CONTENT. This component contains a switch that, according to the route, will show the proper content in the body of the page containing that route.
When I click on the navbar, it will then take me to any of the three routes - including a properly displayed home page - but the home will only show after the page first loads and you click on the Navbar.
Why is this? Again - it works locally just fine, but on GH Pages, will only show the Header, NavBar and Footer for the home page on first load.
Thanks,
Rideout
See code below:
Hosted URL on GH Pages:
https://operasinger.github.io/VRideout-Portfolio-React/
Partial Package.json:
"homepage": "http://operasinger.github.io/VRideout-Portfolio-React/",
"name": "vrideout-portfolio-react",
"scripts": {
"predeploy": "yarn run build",
"deploy": "gh-pages -d build"
},
App.js:
import React, { Component } from "react";
// import { Link } from "react-router-dom";
// import './Fonts.css';
import "./App.css";
import "bootstrap/dist/css/bootstrap.min.css";
import Navbar from "./components/navbar";
import Content from "./components/content";
class App extends Component {
render() {
return (
<div className="App container-fluid" id="background">
<div className="container">
<div className="row jumbotronNavy">
<div className="col-md-4 blue" id="headBlue">
<h1>Vale Rideout</h1>
</div>
<div className="col-md-4 blue" />
<div className="col-md-4 blue">
<Navbar />
</div>
</div>
<div className="row" id="content">
<Content />
</div>
<div className="row justify-content-md-center" id="jumbotronFooter">
<p>© 2018 vale rideout</p>
</div>
</div>
</div>
// </div>
);
}
}
export default App;
Content Component:
import React from "react";
import { Switch, Route, BrowserRouter } from "react-router-dom";
import About from "./about";
import Projects from "./projects";
import Contact from "./contact";
const Content = () => {
return (
<BrowserRouter>
<Switch>
<Route exact path="/" component={About} />
<Route path="/projects" component={Projects} />
<Route path="/contact" component={Contact} />
</Switch>
</BrowserRouter>
);
};
export default Content;
This is the home page when visiting the hosted GH Pages URL
When refreshed within GH Pages, the full route renders
I'm sure this is a very small problem, but it will help me with deploying React apps - as I'm sure it's not a problem native to React.
Thanks!
Rideout
The BrowserRouter component matches the entire URL as seen in the browser to your Routes. Since the root of your React implementation is not the base (/) of the domain, you should add a baseUrl property to your BrowserRouter to reflect that fact. I think you can do:
<BrowserRouter baseUrl="/VRideout-Portfolio-React"> but if not just look on the react-router docs.
If you'd prefer not to hard-code the path into the Router, you should be able to set a homepage inside package.json. Putting this in the package: "homepage": "https://operasinger.github.io/VRideout-Portfolio-React/" will prefix the paths with /VRideout-Portfolio-React when you run npm run build
Actually create-react-app docs covers this pretty well.
I've also noticed, that you are using Router component (BrowserRouter in your example) incorrectly. It should be above all of Routing configuration and Links in jsx tree. This is done to inject context, which will be used by all children of the Router component (even deeply nested).
TL;DR
Just use <HashRouter> as the root component of your Application.
I am rewriting an ASP.NET MVC app to use React with Redux in TypeScript. For routing I am using React Router. The site uses a parameter at to the root to identify the customer's organization.
Example; www.oursite.com/:organizationId with deep links like
www.oursite.com/:organizationId/overview or www.oursite.com/:organizationId/account/:accountId
I have configured React router as below
import * as React from 'react';
import { Router, Route, IndexRoute, HistoryBase } from 'react-router';
import { Layout } from './components/Layout';
import Home from './components/Home';
import OverView from './components/OverView';
import Account from './components/Account';
export default <Route path='/:organizationId' component={ Layout }>
<IndexRoute components={{ body: Home }} />
<Route path='overview' components={{ body: OverView }} />
<Route path='account/:accountId' components={{ body: Account }} />
</Route>;
This works, but any Link components on pages do not, as the root of the app/page is still /.
For example
<Link to={'/overview'} activeClassName='active' />
on the Account control links to www.oursite.com/overview, not www.oursite.com/:organizationId/overview.
Is there a way to configure the React Router to consider /:organizationId/ as the root?
If you take a look at the react router docs it looks like relative links as strings are not supported by react-router. Currently only absolute links are supported.
https://github.com/ReactTraining/react-router/blob/master/docs/API.md#link
However, I think what you are looking for is params. React-router passes down params as props to every component that is connected to a route. For example in your overview component there should params prop. You should be able to do something like
<Link to={`/${this.props.params.organizationId}/overview`></Link>
Let me know if this helps!
My react app works as expected for first level routes such as /, /foo, and /bar, both when using the apps navigation menu or when typing the url directly into the browsers address bar.
However deeper urls such as /foo/bar only work when using the apps navigation menu but not when the url is directly input into the browsers address bar.
For depper URLs, When refreshing the page or typing the url directly into the address bar the sites index.html is displayed (a white screen as no content or styles are loaded), but it appears to not be being rendered by react as no errors are present in the console, and the react dev tools show a blank screen.
I am using react-router 4.0.0, and webpack-dev-server with the --history-api-fallback option set. I have tried switching the server to express and setting up a catch all to redirect all routes to the index.html, as well as downgrading to react-router 3.0.2 however the problem persisted in both instances.
I cut my code down to a bare minimum of just the router and a few bare bone components I am trying to route to.
App Entry Point (index.js)
import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
// import components
import AppContainer from './components/AppContainer';
render(
<LocaleProvider>
<BrowserRouter>
<AppContainer/>
</BrowserRouter>
</LocaleProvider>,
document.querySelector('#main')
);
AppContainer component
import React from 'react';
import { Route, Switch, Link } from 'react-router-dom';
// import components
import Home from './Home';
import About from './About';
import Test from './Test';
import NotFound from './NotFound';
class AppContainer extends React.Component {
render() {
return (
<div>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/asdasdhuahfisd">404 Test</Link></li>
<li><Link to="/about/test">About/Test</Link></li>
</ul>
<Switch>
<Route path="/" exact component={Home} />
<Route path="/about/test" component={Test} />
<Route path="/about" component={About} />
<Route component={NotFound} />
</Switch>
</div>
);
}
}
export default AppContainer;
I managed to narrow down the issue to the html-webpack-plugin that I was using to inject a <script> tag for the generated js file into the body of the app. The script tags src was being generated as a relative url src="main.js", so refreshing the page on deep urls causes the javascript file to not be found, and thus the react app was not loading.
A quick look at html-webpack-plugin code shows that the url for the javascript file is generated from the webpack config variable output.publicPath which I hadn't set in my app. Adding the below code to my webpack.config.js fixed the issue.
output: {
publicPath: '/'
},