I am trying to have optional dynamic routing in nextjs.
I have a signup page what i want to have like optional query params like this /signup/:id
also i don't want to be shown when hover over the link.
When i use 'as' property in link it throws an error.
Error: The provided `as` value (/signup) is incompatible with the `href` value (/signup/[id]). Read more: https://err.sh/vercel/next.js/incompatible-href-as
Related
The following code shows up in the browser, but it just refreshes to the same page when clicked:
<Button className="login-btn" variant="outline-dark" href="Login.jsx">Sign in</Button>
or:
Sign in
I try using <link>, and I get the following error:
The above error occurred in the <Link> component:
at LinkWithRef (http://localhost:3000/static/js/bundle.js:43308:5)
at div
at App
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
It also gives me an error about useHref(), which I'm not using..
The reason it refreshes on clicking the button is that you are passing Login.jsx as the href attribute which expects a URL/route defined in your application and I am assuming you are passing the same Login.jsx as the value for to attribute to the Link tag and because of that the error is occurring. If you want to redirect to the Login page on clicking Sign in then you can use it like this -
Sign in
I am getting an error
_reactNavigation.NavigationActions.push is not a function
when trying to navigate to same route.
I am applying the accepted solution from below link
React-Navigation go to same route with different params
What type can I use for the history.push of the react router using Flow for typing?
type State = {
...
history: string,
}
I use the react router to route to the route when the login is done successfully
history.push("/user");
But the following error appears and I did not find the type in flow
Cannot call `history.push` because property `push` is missing in `String` [1]. (References: [1])
It looks like you have the history object typed as a string, which is why the error is complaining about strings not having a push property. The history type should be RouterHistory from the flow-typed definition: https://github.com/flow-typed/flow-typed/blob/master/definitions/npm/react-router-dom_v4.x.x/flow_v0.63.x-/react-router-dom_v4.x.x.js#L57
I'm working on a server side rendering app and using react-router's match({}, function callback(error, redirect, props){}). When there is no route matching to the given URL I want to let the next middleware carry on. Right now I'm not getting any error (the error param is undefined) when no match happned but a Warning: Warning: [react-router] Location "/non-existing-route" did not match any routes
How can I know if there was no match?
If all three parameters are undefined, this means that there was no route found matching the given location.
From the react-router docs: https://github.com/reactjs/react-router/blob/master/docs/API.md#match-routes-location-history-options--cb
So just check all three callback arguments for undefined.
I am trying to setup Material UI for React, using JSPM and ES6 through Babel.
1) installed material-ui with jspm install material-ui=npm:material-ui
2) this gave me the ability to import material ui into my React Component files like this : import {TextField, LeftNav} from 'material-ui'
At this point I get the right references into my ES6 file, so if I do a
console.log(TextField);
I get the react component printed.
Sadly my current issue is that I'm getting errors when trying to use the component in jsx
return (
<div>
<TextField />
</div>
)
throws an error :
Warning: getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.
warning.js:17 Warning: Something is calling a React component directly. Use a factory or JSX instead. See: http://fb.me/react-legacyfactory
warning.js:26 Warning: TextField(...): No `render` method found on the returned component instance: you may have forgotten to define `render` in your component or you may have accidentally tried to render an element whose type is a function that isn't a React component.
warning.js:17 Warning: Don't set the props property of the component. Mutate the existing props object instead.
dashboard:1 Uncaught (in promise) Error: Can't add property context, object is not extensible
Error loading http://localhost:3000/app.js
at ReactCompositeComponentMixin.mountComponent
Based on the warnings, I'm thinking that the error may be caused by a specific situation created by the combination of tools, Babel+JSPM+Material-UI.
Check the version of react you're running. It should be v0.13.3.
More info can be found here: https://github.com/callemall/material-ui/issues/1303