score:0
i use the same pattern as you in my case my routes variable looks like this:
export const routes = [
{
path: "/",
exact: true,
main: home
},
{
path: "/company",
exact: true,
main: company
},
{
path: "/comments",
exact: true,
main: comments
}
]
edit: this is how i use it
routes.map(route => (
<route
key={route.url}
path={route.url}
exact
component={route.component}
// in case you want to add props to the component
// render={props => <route.component path={route.url} {...props} />}
/>
))
score:1
main should not be a function in this case. try without a function or call the main function.
{routes.map(route => (
<route
key={route.path}
path={route.path}
exact={route.exact}
component={route.main()}
/>
))}
Source: stackoverflow.com
Related Query
- How can I add a display name to a component defined in an object?
- How Can i Add Event Handlers In Reusable React Component Created from Object Array
- How can I display React component based on prop name passed into a container?
- How can I add properties to a react component passed as a variable?
- How can I render a component X amount of times based on a javascript object in React?
- How can I add a new property to Component in _app.tsx in Next.js with Typescript?
- How can I import an existing React component defined in JSX in a Typescript module (.tsx)
- How can I add compoent to another component in React?
- How can I pass the original JSX markup to a component for display in the page as code?
- How can I display a Persona component in a CommandBar in React Fabric-UI?
- How react functional component can use object variable which declared behind the usage? (include example)
- How can I dynamically add attributes to component in reactjs
- How can I pass component object to container in React.js?
- How can i update a name field from single element in array of object from a state in reducer in React-Redux?
- How can I add or remove class using querySelectorAll() in react functional component
- how can I add img as a dynamic component
- How can I add Amazon advertisement script Inside ReactJs component
- How can I add button[type=submit] to React-ladda button component in ReactJS?
- How can I add a Custom component in a Data object?
- How can I break through React maps to display object that has two values one with an array other with string or number(result)
- How do I filter a list of data by id for my react component to get the name of the object
- how can I create a component where I can add as many levels of subpoints I can recursively in a react component
- How can I select a state property object name dinamically to change one of its properties(childs?) on react?
- How to arrange nested array of object data for react table component display
- How to add listener on change Object which already defined with @observable decorator in MobX to use in React
- How can I display an array of objects inside a object in React?
- How can I get all the object inside an object which is present inside an array and add the result into another array
- How can I render different news components into the Navbar Component & display their data on the Navbar page, On Click of Navbar menu links
- How can I add external CSS & JS files to my react component
- how can I add a translationFailSafe object if i18n is unable to loadPath specified in backend?
More Query from same tag
- How to remove default Storybook Canvas styles?
- Render Text in React JS
- get all elements with specific Classname in React
- React Google Login
- How to add live camera scan with "react-qr-reader" in React App?
- What type to add to props.location.state from React.router.dom in TypeScript
- How can I set icon size in react
- Add an external html file with query strings in reactjs
- What is the best way to architecture a React template using props children?
- React 'this' Context within Method
- Is it possible to change manifest.json file dynamically
- Using styled components with Typescript, prop does not exist?
- Material UI Menu not closing after clicking a menu item
- How to access state set through a function which is called in ComponentDidMount()
- Can't remove specific elements from array by index number from dynamic div element in react?
- Adding HTML element inside a object
- passing function between a parent component and child component problem
- Google OIDC error. "Error 400: invalid_scope. Requests for only id token must contain a subset of [openid, email, profile] scopes."
- How to animate element height in React with ReactCSSTransitionGroup?
- Unable to write text field after adding onChange (that have setState) ReactJS
- React JS does not work in some browsers
- How to i write a react code to display all the locality in a pincode when we type pincode in text box?
- How to add React JSX for every item in state array?
- Cards in grid not adjusting their heights as wanted
- Javascript (React + Flow) - Destructuring with nullable nested objects
- Get data from filepond object instance
- Redux without action
- Array.map render identical titles once
- How to capture data entered into table row component
- Set value of Reactstrap's Input to empty string