how to pass props into component from route array in react

Question

Now I am define route "react-router-dom": "^5.1.1", like this:

const Channel = loadable(() => import(/* webpackChunkName: 'about' */ '@/views/App/Cruise/Channel'))


const routes = [
    { path: '/index', exact: true, name: 'Index', component: Channel, auth: [1] }
]

for the old way, I am pass props into component like this way:

class App extends React.Component {
    render() {
        return (<Router>
            <Switch>
                <Route path='/login' render={(props) => <Login user={this.props.user} />}/>
            </Switch>
        </Router>)
    }
}

how to pass props into component Channel when define route as an array? I have tried this way:

{ 
        path: '/app/cruise/channel', 
        exact: false, 
        name: 'Channel', 
        render: (props) => (<Channel {...props} channel={this.props.channel}/>)
    },

but it could not work. Now I am passed the props like this in the routes outer component:

<Content className='content'>
                        <Switch>
                            {routes.map(item => {
                                return (
                                    <Route
                                        key={item.path}
                                        path={item.path}
                                        exact={item.exact}
                                        render={props =>
                                            !auth ? (
                                                <item.component {...props} channel = {this.props.channel}/>
                                            ) : item.auth && item.auth.indexOf(auth) !== -1 ? (
                                                <item.component {...props} channel = {this.props.channel} />
                                            ) : (
                                                <Redirect to='/404' {...props} />
                                            )
                                        }></Route>
                                )
                            })}
                            <Redirect to='/404' />
                        </Switch>
                    </Content>

it could work but I think it is a very ugly way, any better suggestion?

Are you trying to access URL params or pass custom params?

T J
– T J

2021-04-11 07:20:51 +00:00
Commented Apr 11, 2021 at 7:20 — T J
– T J, Commented Apr 11, 2021 at 7:20
I want to pass data through props @TJ

Dolphin
– Dolphin

2021-04-11 07:34:42 +00:00
Commented Apr 11, 2021 at 7:34 — Dolphin
– Dolphin, Commented Apr 11, 2021 at 7:34

Arjun Nair · Accepted Answer · 2021-04-11 11:11:45Z

1

I believe you would use the Link component to route to the correct location. So you could use routes and Link as below

 const Channel = loadable(() => import(/* webpackChunkName: 'about' */ '@/views/App/Cruise/Channel'))


const routes = [
    { path: '/index', exact: true, name: 'Index', component: Channel, auth: [1] }
]

Link in APP

const App=(props)=>{

return (
<Link to={{
              pathname:'/index',
              user:props.user
            }} >Channel
</Link>
)

}

Inside channel you can access user from props.location.user

answered Apr 11, 2021 at 11:11

Arjun Nair

1114 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how to pass props into component from route array in react

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related