Using NextJS router my website is receiving the same image.
// user/[id]
const router = useRouter();
const { id } = router.query as {
id: string;
};
return (
<div>
<p>{id}</p>
<img src={...}/>
</div>
)
On page user/1 the image is correct. Clicking a button on page to user/2 displays the correct image for 2. When clicking back on the browser or window.history.back() to user/1 the image is still of user 2.
How do I do a complete refresh on the page to ensure the cache isn't used?
Setting a unique key for the img tag based on the page id will solve it.
<img key={id} src={...}/>
Related
I want to import image from other component but Why it's not show. in
Data.js I'm showing the image path. but when I want it . it's not show
in HOME. but Without Image Everything is work properly
Data.js
export const HomeObject = {
id: 'about',
img: require('../../Images/sv-1.svg'),
alt:'CAR',
}
Home.jsx
const Info = ({img, alt}) => {
return (
<Img src={img} alt={alt} />
)
React img works similar to html img tag. pass file path as src value to show the image.
when passing image src as prop to the component, keep in mind that it needs to be a string value. not require('...') value.
const Parent = () => {
return (<Info img={'../../Images/sv-1.svg'} alt={'info image'}>
};
const Info = ({img, alt}) => {
return (
<Img src={img} alt={alt} />
);
}
this works fine in local setup. but, when you deploy the application, serve the image as static resource and use it.
I am very new to React (React hooks, etc). My task is to open up a page when clicked on a button. I do not want to change the url in this case. Just open up a new page (just load the new page component on the main page)?
Example,
export function MainPage(){
const [new_page, openNewPage] = useState('');
return (
<header className = "styling_headers">
<button onClick = {() => openNewPage("SetNewPage")} > Click Me </button>
{if (new_page==="SetNewPage")?<NewComponent></NewComponent>: null{""}}
</header>
)
}
Now, after clicking on the button "Click Me", I just want to open a new page completely without changing the URL (ie, keeping the main page url when clicked on the button and moving to the new page), this means that the new page would just be a component of the main page. I do not want to use routers just for opening the new page. I do not want the contents of the main page to reflect on the new page either. It should be a fresh page with only the contents of the new page. How do I achieve this?
-- The new page component --
export function NewComponent (){ // maybe some props will be passed here when clicked on the button.
return (
<div> This is the new page when clicked on the button </div>
)
}
Please can someone modify the above code or direct me in how I can link the NewComponent Page when clicked on the "Click Me" button on the main page without using routers? React hooks or any other React solution is welcome.
I would really appreciate any help. I googled a lot about this, but still haven't found the solution for this. Please help!
Thank you.
If you really don't want to use react-router you can use plain React state and render component accordingly on the current state. Something like this
function MainPage(){
const [page, setPage] = useState("");
return(
<header className = "styling_headers">
<button onClick={() => setPage("MAIN_PAGE")}>
Change to main page
</button>
<button onClick={() => setPage("OTHER_PAGE")}>
Change to other page
</button>
{page === "MAIN_PAGE" ? <MainPage/> : null}
{page === "OTHER_PAGE" ? <OtherPage/> : null}
</header>
)
}
Again you should only use this if you app is small. If your app is big enough doing this may make you app very complicated, consider that you may have other logic in the app
Hi I am trying to make a a back button for my pages that when clicked returns you to the search page with the filter options you selected still there. I have this halfway to working as the following implementation:
function goBack(evt) {
evt.preventDefault()
Router.back()
}
const RewindToSearch = () => {
return (
<a href="/" onClick={goBack}>
<Back>
<Arrow />
</Back>
</a>
)
}
This will return you to the search page with the filter options chosen. However the page the back button is on also allows for looking at photos, if i open photos then close and try to use the back button I am returned to photos. Is there a way for goBack to return me to search page with the filter options I have selected ?
I'm using gatsby js and trying to figure out how to have a page level side bar with Gatsby links that render a new component inside a div in the same page I can do this using react-router-dom but in Gatsby all I can find is how to create blog posts which is driving me nuts as every tutorial I find is the same blog post.
Here is my layout page /layouts/index.js
export default ({ children }) => (
<div id="layout">
<header>
<h3>Header</h3>
<MainNav />
</header>
{children()}
</div>
)
About Page
/pages/about.js
export default ({ location, match }) => {
console.log('location = ', location, 'match = ', match );
return (
<div id="about">
<SideBar />
<div id="content">
// . add child template or component for link clicked in sidebar
</div>
</div>
);
};
What I'm trying to do is when a user clicks on a link in the side bar stay on about but render a new component or template based on the gatsby-link clicked in the about sidebar.
The About SideBar component
/components/about/side-bar.js
const SideBar = () => {
return (
<div id="side-bar">
{/* <li><Link to='/about?sort=name'>work</Link></li> */}
<li><Link to="/about/work">work</Link></li>
<li><Link to='/about/hobbies'>hobbies</Link></li>
<li><Link to='/about/buildings'>buildings</Link></li>
</div>
)
}
Problem with the links above, they are trying to go to a new page called.
/about/work
This is not what I'm trying to do. Again I'm trying to make it stay on about but render a new component inside the content div.
Please help gatsby is so all over the place as far as docs goes. ok maybe its just me and not getting the docs clearly.
Thanks
UPDATE:
I tried adding a page suing createPage which works for me kind of but it doesn't pass the match.params id
gatsby-node.js
exports.createPages = ({ boundActionCreators }) => {
const { createPage } = boundActionCreators;
const myComponent = path.resolve('src/pages/about/index.js');
createPage({
path: '/about/:id',
component: myComponent
})
}
After a long time of trying to understand Gatsby and I can say I still don't as its docs are vast and not very clear. But once I started to look at the node-apis and onCreatePage it gave me some ideas. This is what the docs literally say.
onCreatePage
Called when a new page is created. This extension API is
useful for programmatically manipulating pages created by other
plugins e.g. if you want paths without trailing slashes.
So the only part in here that gives me a hint of this might be the key to helping me is this line. useful for programmatically manipulating pages created by other
plugins
Anyway this got me writing some code at least. Then about 3 hours later I found a plugin that was doing exactly what I was trying to do with this method. The plugin is called gatsby-plugin-create-client-paths key here is client-paths!!!!!
This makes life worth living! So in my case above I just wanted to be able to use Gatsby's router ( which is just react-router-dom behind the scenes), to pass me and id or value to routers match.params object. It still doesn't but what it does do is checks for any path after a prefix like /folder/ in my case '/about/work and recreate the page with a template component (in my case keep using pages/about/index.js), which is my template. Now that we have about/index.js rendering for ever link after /about/ then we can use some internal switch statement to handle the location that is been passed to /about/index.js. Still don't get match.params update but I do get props.location.pathname; which allows me to extract everything after the prefix to use in a switch statement to render my specific components based on the routes pathname. Enough rabbiting on here is a rough solution to show as an example.
So add the plugin as an npm install.
open up gatsby.config.js and add the below code to the exports.
module.exports = {
plugins: [
{
resolve: `gatsby-plugin-create-client-paths`,
options: { prefixes: [`/about/*`] },
},
]
}
Then in my main about page pages/about/index
import React from "react";
import SideBar from '../../components/about/side-nav';
export default (props) => {
const { pathname } = props.location;
var n = pathname.lastIndexOf('/');
var pageId = pathname.substring(n + 1);
const page = () => {
switch(pageId){
case '':
return (
<div>Work Page</div>
);
case 'work':
return (
<div>Work Page</div>
);
case 'hobbies':
return (
<div>Hobbies Page</div>
);
case 'buildings':
return (
<div>buildings Page</div>
);
}
}
return (
<div id="about">
<SideBar />
<div id="content">
{page()}
</div>
</div>
);
};
Then in my sidebar I call it like this.
<li><Link to="/about/work">work</Link></li>
<li><Link to='/about/hobbies'>hobbies</Link></li>
<li><Link to='/about/buildings'>buildings</Link></li>
Hopefully this will help someone else out. After all this I'm starting to really question the bulk of gatsby especially with docs not been very clear. Based on the response to my question I guess not many people in stackoverflow's community are using Gatsby which is worrying when you need help. It does look like Gatsby's github community is very helpful but that should be for bug issues and not for questions like mine, but encouraging to see.
Hope this helps someone.
I'm not certain if this is specific to React or the build chain inside SPFx, but I'm having issues setting a background image on a div dynamically. I receive the URL from an API call to SharePoint and use the below code to generate a simple site card with the site logo and title.
const Site = (props: SpSite) => {
const {Title, Url, BannerImageUrl, Acronym, BannerColor} = props;
const hasLogo = BannerImageUrl && BannerImageUrl.length > 0;
const logoUrl = hasLogo ? encodeURI(BannerImageUrl) : null;
const logoStyle: React.CSSProperties = hasLogo ? {backgroundImage: `url('${logoUrl}')`} : {backgroundColor: BannerColor};
const siteLogo = <div className="site-logo" style={logoStyle}>{!hasLogo && Acronym}</div>;
return (
<div className="site-card">
<a href={Url}>
<div>{siteLogo}</div>
<div className="site-text">
<div>{Title}</div>
</div>
</a>
</div>
);
};
When the URL is in the format https://tenant.sharepoint.com/image.jpg everything works as expected and the background image is set properly on the generated HTML. When the URL has the format of https://sitename.com/GetLogo?id='RandomGUID' the attribute
style="background-image: url('https://SomeImageUrl')" doesn't get created on the resulting div. I can't figure out if this is being stripped out somewhere in the build chain or if React isn't handling it properly. I can browse directly to the GUID based image URL and it renders just fine.
Turns out that this was a simple single vs double quote issue. Switched url('${logoUrl}') to url("${logoUrl}")and all works as expected.