I have created a 404 page using nextjs which works without any config and show my custom 404 page.
I have a link in this page which redirects user to another page. On this new page if user click back I want to send them back to the page before 404.
I saw this link but there is nowhere I used router.push.
How can I do this?
page1>404page>page2
by clicking back button on page2 I want to go to page1 not 404page.
Thanks
In order to achieve what you want you can use router.replace.
According to the docs:
Similar to the replace prop in next/link, router.replace will prevent adding a new URL entry into the history stack.
To actually get (and use) the router object, you might use the useRouter object provided with NextJS. Hence, your 404 page might look like this:
import { useRouter } from "next/router";
export default () => {
const router = useRouter();
return (
<div>
<h3>404</h3>
<h2>
Try go here instead:{" "}
<span onClick={() => router.replace("/page2")}>Go page2</span>
</h2>
</div>
);
};
This way, by going to page2, you replace the 404 entry in the history stack by the page2 url which gives the behavior you expect (working example here)
Related
I need to make div which will act simulate to Link element, so when you click on it you navigate to another page.
Something like this
<Link to="/employees">
...
</Link>
But it has to be div.
I could use onClick but when I use it, I should use whole path https://pro.websire.com/employees. I don't want to use it because we have different versions of website.
So path should be exactly like in Link element
<div onClick={to('/employees')}>
...
</div>
Does anyone know is it possible to do ?
If you are using react router, you can programmatically navigate using the useNavigate hook. Inside your component, you need to do the following.
const LinkComponent = () =>{
const navigate = useNavigate()
return(<div onClick={() => navigate("/home")}>Link </div>)
}
I have a question regrading to react. I have a IconButton (Material UI) I want to click this button and it will redirect to the specific help page.
For example:
local:3000/education. When I clicked button it will redirect something like local:3000/education/support page.
local:3000/data. It redirect to something like data/support page.
...etc more pages
I am stuck, I am not sure how to implement the button onClick function to redirect to the right support page. I am thinking using react-router, I have did some research we can use 'params' and 'history' parameters from the props? Thank you
Please give me some good advice and right direction thank you.
import { useLocation, useHistory } from "react-router-dom";
export default function App() {
const history = useHistory();
const { pathname } = useLocation();
return (
<div className="App">
<button onClick={() => history.push(`${pathname}/support`)}>
support page
</button>
</div>
);
}
localhost:3000/education.
If you use history.push("/support"), It redirects to localhost:3000/support.
But If you use history.push("support"), It redirects to localhost:3000/education/support
https://reactrouter.com/web/api/Hooks
Is there a way I can prevent the url from changing when the back button is clicked?
I'm currently using createMemoryHistory to prevent url modification when I navigate around clicking links set up in my app. By doing this, I'm able to successfully navigate around but when I click the back button in my browser, it modifies the url (which I don't want).
E.g. My url looks like localhost:3000. Then I click on the settings link and I navigate to the settings view but my link is still localhost:3000. Now in settings, I click on Printers and navigate to the Printers view inside settings. My url still looks like localhost:3000. However, if I click the back button and return to the settings page, now my url looks like localhost:3000/settings.
Is there anything . I can do to the prevent the back button from modifying my url? Thank you for your help!
I would suggest using react-router's browserHistory class like this:
import { browserHistory } from 'react-router';
//... inside your component class
componentDidMount() {
browserHistory.listen(location => {
if (location.action === "POP") {
// Do your stuff
// maybe use your `createMemoryHistory` API
// to push a / to the history to keep the URL the same?
}
});
}
i am using meteor accounts for login and user registration.
When a user hits the bottom line (register):
He gets redirected to the create account page:
The code behind these pages is a mixture of jade templates and javascript.
template(name="userFormsLayout")
section.auth-layout
section.auth-dialog
+Template.dynamic(template=content)
It seems like the content is replaced when hitting the register link and this is as far as my knowledge goes...
I would like to prevent users from creating new accounts by either disabling the final register button on the registration page and / or disable the complete registration page.
I am also open for other solutions to prevent useers from registering.
RELATED:
How can I set forbidClientAccountCreation to false in Meteor?
UPDATE:
I also tried this
AccountsTemplates.configure({
forbidClientAccountCreation: true
but got:
Error: signUp route configured but forbidClientAccountCreation set to true!
Can anyone help me with this issue?
i don't have the whole answer, but i can give you a couple pieces to get you started.
first, you can tell AccountsTemplates (AT) to use your layout. you can put this anywhere that's loaded to both client and server, e.g. lib/atConfig:
AccountsTemplates.configureRoute('signIn', {
layoutTemplate: 'LoginLayout'
});
here's the layout template:
<template name="LoginLayout">
<main>
<div>
{{> Template.dynamic template=main}}
</div>
</main>
</template>
in the JS, you can hide the bits of the template you don't want the user to see. here, i'm hiding the password form and a separator. you can dig into the DOM to figure out which bits you want to hide:
Template.LoginLayout.onRendered(function() {
this.autorun(() => {
if (this.subscriptionsReady()) {
Tracker.afterFlush(() => {
$('.at-pwd-form').remove();
$('.at-sep').remove();
});
}
});
});
for the server, you can check for new user attempts and reject them if they're made w/ username and password. i think this should work, but you may have to play around with it:
import {Meteor} from 'meteor/meteor';
Meteor.startup(() => {
/**
* reject registration via username/password.
*/
Accounts.validateNewUser(function(attemptInfo) {
if (attemptInfo && attemptInfo.services && attemptInfo.services.password) {
return false;
}
return true;
});
});
Your last Error comes from sending conflicting message to Accounts setup. You might want to remove your route configuration for the signup page?
If I type website.com/about-us/ in the address bar it breaks.
Says "Not Found" instead of loading the page
If I type website.com/#!/about-us in the address bar, it goes to the right page. // Added hashbang or #!
If I click a link on the page to website.com/about-us/ (without the hashbang), it works. How do I fix it so I can just go to the website without a hash bang from the address bar?
$locationProvider.html5Mode(true);
Update
Here's my server config
app.route('/').get(index.render); // UPDATE: This is why the home page was loading and I could click links
app.get('/.\*', function (req, res, next) {
if(req.url.substring(0,4) === "/api") {
return next();
} else {
res.send(index.render) // render is a function in the index controller
}
});
TL;DR: link clicks work as expected because your JavaScript has already loaded
Since your using a UI router, link clicks are "told" by Angular to go to the appropriate hashbang route unless you use $locationProvider.html5Mode(true);, which you are. So in this case, link clicks know to use html5Mode because the JavaScript in your page has already loaded.
When you enter the link in the address bar manually, the JavaScript hasn't had a chance to load, so it doesn't "know" to map the appropriate non-hashbang route to the correct view in your app.
To get the desired behavior, you'll need to configure your server to route correctly:
app.get('/some-page', doStuff);