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 ?
Related
I'm using Next.js for my application and I'm facing some issues on routing to the previous route of the application. I'm aware of the router function back() which is similar to window.history.back(), I would like to go back to the route when a Link is clicked, and if the previous link isn't from my application or is null, I would like to go to the home page as a default.
I used libraries like react-router-last-location for my react app, but I wanna see if there are better ways to do it in Next.js via next/router.
Here is my sample code:
<div className={styles['icon-container']}>
<Link href="/"><a>
<img src="icon.svg"></img>
</a></Link>
</div>
if i use router.back() in the href input, the page goes back automatically even before it loads, how do i solve this issue?
<Link> can't go outside of your app. (but router.back() can)
You can't use router.back() directly in the code, you need to do something like :
<img onClick={() => router.back()} src="icon.svg" />
<Link> does not have onClick property.
import { useRouter } from 'next/router'
export default function Page() {
const router = useRouter()
return (
<button type="button" onClick={() => router.back()}>
Click here to go back
</button>
)
}
Source of info here
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
I'm really new to React and I'm working on this webapp, where I managed to receive data from the Google Books API and managed to list the results when I search for it.
How do I make a new page for each book whenever the user clicks on one of the books?
The code looks like this so far:
renderSearchResults = () => {
const { results } = this.state;
if (Object.keys(results).length && results.length) {
return (
<div className='results-container'>
{results.map((result) => {
return (
<a
key={result.id}
href={result.previewLink}
className='result-item'
>
<div className='image-wrapper'>
<a href={result.volumeInfo.infoLink}>
<img
className='image'
src={result.volumeInfo.imageLinks.smallThumbnail}
alt={result.volumeInfo.infoLink}
/>
</a>
</div>
<h6 className='image-title'>{result.volumeInfo.title}</h6>
</a>
);
})}
</div>
);
}
};
Right now I made it so that when each book is clicked it will redirect to the Google page for each book, but I want to make it like the design below, where when the user clicks they will be redirected to a new page like this:
The design I want to develop
Let me know if you have a solution or if you need any other information in order to help me.
Other than that, have a great weekend!
Exist in html the target Attribute, u can use like this:
Visit W3Schools
for more information see this w3schools.com definition
I am using the Material UI Dialog and react-router to create a sign-in option. Inside the sign-in dialog there is a sign-up link that is supposed to redirect the user to the sign-up page and close the dialog at the same time.
The code for the sign up link looks like this:
render() {
return (
<Link
class="underline text-green-600 mx-1 cursor-pointer"
to="/signup"
onClick={this.props.handleClose}
>
Sign Up
</Link>
);
}
Right now, when the Signup link is clicked the dialog closes without changing the page address. If the onClick command is removed the page address changes but the dialog is not closed. Is there a way to both close the dialog and redirect the page at the same time? Thank you
You can provide a function to react-router Link to prop:
to: function
A function to which current location is passed as an argument and which should return location representation as a string or as an object
So one possible solution is:
<Link
class="underline text-green-600 mx-1 cursor-pointer"
to={() => {
const href = '/signup';
this.props.handleClose();
return href;
}}
>
I get how to specify where to render the reactjs application by using the render method and specifying the html tag where it should be rendered.
What I do not understand is how you can have a list of react.js applications that is dynamically loaded into that same HTML tag.
For example there is a sidebar which is dynamically created to give a user a list of N number of react.js applications. When the user clicks on one of the links it loads that application into the HTML tag (div or whatever) container on the right.
I am sure this may be something easy but have been struggling with this concept for awhile.
Would appreciate any inputs anyone has on this.
If you truly had multiple full apps you wanted to swap out, you'd have to manually mount and unmount them. Something like a function like this, that unmounts the previous app, then mounts a new one. Example
function swapApp(App) {
const appNode = document.getElementById('app')
ReactDOM.unmountComponentAtNode(appNode)
ReactDOM.render(<App />, document.getElementById('app'))
}
But that would be a pain. So, typically, that menu and the content being changed are all part of the same react app. This app would render the menu, keep state about what item you clicked, and then render some components conditionally, depending on what was clicked.
Something like this example
function App() {
const [showingItem, setShowingItem] = React.useState(null)
return (
<>
<p><a href="#" onClick={() => setShowingItem('A')}>Show Item A</a></p>
<p><a href="#" onClick={() => setShowingItem('B')}>Show Item B</a></p>
{showingItem === 'A' ? <AppA /> : null}
{showingItem === 'B' ? <AppB /> : null}
</>
)
}