score:22
Accepted answer
from route rendering method:
there are 3 ways to render something with a
<route>
:- <route component> - <route render> - <route children>
each is useful in different circumstances. you should use only one of these props on a given
privateroute
contains both component
and render
prop. you can only use one rendering method but not both.
<privateroute exact path="/dashboard" component={dashboard}></privateroute> // here
const privateroute = ({
...
}) => (
<route
render={props => ()} // here
/>
);
fix
: rename component
prop to comp
since it's acting as an hoc:
// rename prop to `comp`
<privateroute exact path="/dashboard" comp={dashboard}></privateroute>
const privateroute = ({
comp: component, // use comp prop
auth: { isauthenticated, loading },
...rest
}) => (
<route
{...rest}
render={props =>
!isauthenticated && !loading ? (
<redirect to="/login" />
) : (
<component {...props} />
)
}
/>
);
score:4
use <route render={() => <yourcomponent />} />
instead of <route component={yourcomponent} />
.
don't combine two of those, react does not like that.
Source: stackoverflow.com
Related Query
- Warning: You should not use <Route component> and <Route render> in the same route; <Route render> will be ignored
- You should not use Route or withRouter() outside a Router when using react-router 4 and styled-component in react
- React Router not working and Warning: You tried to redirect to the same route you're currently on: "/"
- history.push and Link change the URL and not re render the component if I have many routes for the same component
- When should you use render and shallow in Enzyme / React tests?
- Reactjs Warning: input is a void element tag and must not have `children` or use `props.dangerouslySetInnerHTML`. Check the render method of null
- Cannot determine how to use Redux and React-router on the same component
- React router 4 `Link` component only changing the url and not updating the route
- Is it a bad practice to use state in a React component if the data will not change? Should I use a property on the class instead?
- React Router v4: Component and Children in the same route
- Catch 401 and render a message on the same component
- Can you use React smooth scroll and React Router Links in the same website?
- react prop not rendering in parent component and even in the same one
- Warning: Render methods should be a pure function of props and state; triggering nested component updates from render is not allowed
- react-router: Should a nested route render a child component of the IndexRoute's component or should it render a smart parent (IndexRoute) component?
- React - What is meant by 'Do not use HOC’s in the render method of a component. Access the HOC outside the component definition.'?
- React Router v6 : How to render multiple component inside and outside a div with the same path
- Use the same form component for both, add and update. ReactJs
- How can I get a component to update on path change while using the same route and component?
- How can I shuffle an array of objects on page render and map over the shuffled array without console warning of "two children with the same key"?
- You should not use Route outside a Router after use of withRouter
- React: same component reappearing multiple times in the app, how can I make sure that all states are captured accurately and not just the last?
- Couldn't use the same classname across components. CSS is not being scoped inside a style component
- ReactJS and Laravel, nested route is not working. It bring me to the same page
- Function component on the same page in not picking in route (react-router-dom v6) of react project
- I made an API call fetching data from it on a React component and passed it on to a state. I want to use the same data on another component too
- React Router changes route but does not render the component
- React-mdl Error: Invariant failed: You should not use <Link> outside a <Router> The website is not getting Routed
- You should not use Route outside a router
- Is it a bad practise to use the useState and useReducer hook at the same time in React? My to-do list is not working as supposed to
More Query from same tag
- Get diff on rerender in React
- Update Context state before component loads
- React Redux with hooks - authentication and protected routes
- How to load es6, react, babel code in html with cdn?
- Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object
- Force refresh and clear cache - ReactJS
- Howler JS & React AudioContext console warning
- Get DOM Element from React.createElement()
- How to load a image with absolute path in react.js
- Can I pull out URL parameters from different format than normally used on react-router-dom?
- I want to create a button inside a cell of react-table column
- When to use Boolean(var1)?
- How to zoom.in() in a button (React swiper)?
- How to put back HTMLElement into React component after the was (re)moved without React
- Why is my state variable not getting passed as prop to a child element?
- React radio not resetting the values
- × typeerror: cannot destructure property 'yyy' of 'object(...)(...)' as it is undefined
- Cannot read property 'momentLocalizer' of undefined - React Big Calendar
- Using multiple Webpack loaders to transform SVGs into React components
- Not able to reduce the size of image in Material UI CardMedia in a React component
- React Router Redux upgrade from v3 to v4
- C# WebApi Login Verification
- How to add vanilla JS via useEffect to my React project?
- How to get params in parent route component
- useState state update in callback referencing old state
- how do I render a page in react using functional components when onSubmit?
- react-hook-form and useState (toggle)
- How to create a carousel in React.js and Framer Motion
- useFetch custom hook not working properly
- How to add a class with React.js?