So, I have a relatively complex setup involving react-router and react-async-connect to render stuff server-side.
Here's my route setup:
<Route path='/' component={App}>
<Route path='profile/:userID' component={UserProfile} />
<Route path='*' component={NotFound} status={404} />
</Route>
So, when someone hits a profile/{userID} path, obviously the UserProfile component is rendered, which in turn makes a call to an external API to get props. However, if this API returns a 404, I want to display my 404 page.
The trouble is that it's a 404 from an external service, not a "real" router 404. How does one trigger this?
I really want to avoid importing the NotFound component into UserProfile component and doing it that way, seems quite dirty.
You can achieve this by using browserHistory function:
// UserProfile.js
import { browserHistory } from 'react-router';
// In place where you need redirect to 404:
browserHistory.push('/404-page')
I think, you can redirect to any route that don't matches your defined routes, as you are redirecting to NotFound page at every not matched route.
Keep your 404 application status in store/reducer as default false.
Upon getting 404 status code - set it to true.
Once user is clicked other link - reset to false.
In your App.render() do smth like this:
render() {
return isNotFound ? <NotFound /> : {this.props.children};
}
I've just found this library, react-server-status, that provides a friendly and easier way to provide the status page.
import React, { Component } from 'react';
import ServerStatus from 'react-server-status';
export default class NotFound extends Component {
render() {
return (
<ServerStatus status={ 404 }>
<div>Some content</div>
</ServerStatus>
);
}
}
Related
Im new to nextjs, and Im checking if it will be good for the app that will have pretty complex and messy internal navigation. Just checked their documentation and I see that they recommend usage
of Link component like this <Link href="/your_path">Path</Link>. A bit scary is that I have to provide 'your_path' as a string so every time i change page file name I have to manually update code that redirects to this page. Is there any solution that allows me to define routing on my own so I can write something like (pseudocode)
routes = [
...
{
page : 'page_name',
path : 'path_to_page'
}
...
]
So instead of using string I can do <Link href="{route.path}">Path</Link> or Im condemned to use this file-system based router with all consequences?
The simple answer is yes!
When you want to change a user route in NextJs you have 2 options,
The first is with the <Link> Element that you can specify a href to where it directs.
And you also have a useRouter hook for more complex routing for example if the user does an action that requires moving him into a different route you can do it internally in your handlers.
For more information about useRouter hook.
What I usually do is storing my routes in an object
const ROUTES = {
HOME: "/",
ABOUT: "/about"
}
and wherever you call routes you just use the object so F.E
With Link tag
<Link href={ROUTES.ABOUT}>ABOUT PAGE</Link>`
with useRouter hook
// Inside a React Component
const router = useRouter();
const handleNavigateToAbout = () => {
router.push(ROUTES.ABOUT);
}
return (
// SOME JSX
<button onClick={handleNavigateToAbout}> Go to about page! </button>
)
According documentation #auth0/nextjs-auth0 we can use withPageAuthRequired for trigger login screen on pages required login.
short variant: export const getServerSideProps = withPageAuthRequired();
But what to do if I need to use getStaticProps for pre-render page at build time which can't be used together with getServerSideProps? Is there any way to use withPageAuthRequired on request static generated pages?
Right now I am using double check on client side for check auth. But I would rather use a server side check as i use on other pages.
P.S. There is way to use withPageAuthRequired on client side as well. This is not suitable for my use
Since getStaticProps() is used to build a static page (i.e., no server-side logic/rendering at request time), the auth check and redirect to login will have to happen on the client side.
You might be able to get the behaviour you want by sticking a proxy in front of the static resource (e.g., using Lambda#Edge), though I'm not very familiar with this approach yet.
From your question it sounds like you are already familiar with how to do the check/redirect on the client side, but for the benefit of others who come across this post in the future:
To fetch user information on the client side, add a <UserProvider> to your app, and call the useUser() hook in client-side components.
See docs:
Wrap your pages/_app.js component with the UserProvider component:
// pages/_app.js
import React from 'react';
import { UserProvider } from '#auth0/nextjs-auth0';
export default function App({ Component, pageProps }) {
return (
<UserProvider>
<Component {...pageProps} />
</UserProvider>
);
}
You can now determine if a user is authenticated by checking that the
user object returned by the useUser() hook is defined. You can
also log in or log out your users from the frontend layer of your
Next.js application by redirecting them to the appropriate
automatically-generated route:
// pages/index.js
import { useUser } from '#auth0/nextjs-auth0';
export default function Index() {
const { user, error, isLoading } = useUser();
if (isLoading) return <div>Loading...</div>;
if (error) return <div>{error.message}</div>;
if (user) {
return (
<div>
Welcome {user.name}!
Logout
</div>
);
}
return Login;
}
For other comprehensive examples, see the EXAMPLES.md
document.
An alternative approach that uses withPageAuthRequired() on the client side:
import React from 'react';
import { withPageAuthRequired } from '#auth0/nextjs-auth0';
import Layout from '../components/layout';
export default withPageAuthRequired(function Profile({ user }) {
return (
<Layout>
<h1>Profile</h1>
<h4>Profile</h4>
<pre data-testid="profile">{JSON.stringify(user, null, 2)}</pre>
</Layout>
);
});
Linked from additional examples.
Following this guide, I created the following file in my project:
/pages/user/[id].js
class Post extends Component {
render() {
return (
<React.Fragment>
<Navbar />
<Content />
<Footer />
</React.Fragment>
);
}
}
export default Post;
But when I go to that URL, I get a 404.
What is the problem?
Assuming you're visiting (for example), http://localhost:3000/user/something (where something is your id), try also visiting http://localhost:3000/user/something/ (note the backslash). This is currently a known issue in Next with dynamic routing.
(This also assumes you don't have pages/user/something.js in your project as dynamic routes take a back seat to explicitly named routes.)
I am quite new to Meteor & React. Here I would like to redirect my currect user to home page whenever the logout button is pressed. Attached you can see the protected page template with the logout button.
Please note that I am working with the latest versions (Meteor 1.6.1 and React V4).
import React from 'react';
import { Accounts } from 'meteor/accounts-base';
export default class Link extends React.Component{
onLogout(){
Accounts.logout()
};
render(){
return(
<div>
<p>Private Content goes here</p>
<button onClick={this.onLogout.bind(this)}>Logout</button>
</div>
);
}
};
any kind of support will be appreciated.
There are two main options to use here:
1. Pass a callback to Accounts.logout(func)
This is the simplest but mixes the return behavior into your component, which is not ideal.
2. Use Accounts.onLogout(func)
You could put this with your accounts initialization or with your router code, whichever keeps the logic grouped together best for your app.
In that callback, you'll want to use your router to redirect. The exact syntax will depend on your router, but will generally look like:
Router.go('/')
Another way, if you are setting things via meteor-useraccounts way...
const myLogoutFunc = function() {
FlowRouter.go('/login');
}
AccountsTemplates.configure({
// Hooks
onLogoutHook: myLogoutFunc,
onSubmitHook: mySubmitFunc,
preSignUpHook: myPreSubmitFunc,
postSignUpHook: myPostSubmitFunc,
});
Template event code is something like this..
'click .logout': () => {
AccountsTemplates.logout();
}
Read in detail here https://github.com/meteor-useraccounts/core/blob/master/Guide.md
I have a router that looks something like this
<Router>
<Switch>
<Route path="abc.do" render={() => <SetupAppInitialLoad pageKey="abc" />} />
<Route path="xyz.do" render={() => <SetupAppInitialLoad pageKey="xyz" />} />
</Switch>
</Router>
I have many Route like these inside <Switch>. I am using redux to handle state and dispatching async actions from some components when user clicks on a button/link.
export const asyncExampleAction = () => {
return (dispatch, getState) => {
//logic to send inputs to server comes here
.then(checkStatus)
.then(parseJSON)
.then( (data) => {
if (success case) {
history.push(`something.do?phase=something`);
} else {
//handle error logic
}
})
.catch( (error) => {
console.log(error);
});
}
}
Now, the problem I am facing is, even though history.push updates the url and navigates me to 'something.do?phase=something', but I don't see Route's history.location getting updated. Because of this (I think), when I click on some link on the page 'something.do?phase=something', only url of the page changes, but navigation to that new page doesn't happen.
I checked Programmatically navigate using react router V4 and Programmatically navigate using react router, but still not getting anywhere. Please help.
That happens because react-router does not directly depend on window.history, but instead uses this history project, which wraps window.history and provides react-router with the possibility to listen to location updates and react on them.
You have to options to update navigate from your actions:
Use react-router-redux library.
Or pass history prop from your Component to your actions and use it to navigate inside of them.
Second option is the one officialy recommended by react-router doc:
Rather than dispatching actions to navigate you can pass the history object provided to route components to your actions and navigate with it there.