CODEWITHSUNDEEP
javascriptreactjsreact-routerreact-router-v4
eveo
eveo

Reputation: 2833

React router error about redirecting to the current route. Unsure how to properly structure routes

I have a repo to reproduce this and see the error: https://github.com/rublev/parcel-static1/tree/master

The basic structure of my routes is as follows:

// app/app.js
const render = Component => {
    ReactDOM.render(
        <AppContainer>
            <Provider store={ store }>
                <ConnectedRouter history={ history }>
                    <Route component={ Component } />
                </ConnectedRouter>
            </Provider>
        </AppContainer>,
        document.getElementById('react-root')
    )
}

// app/containers/App/index.js
<div className='app'>
    <Switch location={ location }>
        <Route exact path='/' render={() => (
            loggedIn ? (
                <Redirect to='/organizations' push />
            ) : (
                <Redirect to='/onboarding' push />
            )
        )}/>
        <Route path='/organizations' component={ Organizations } />
        <Route path='/onboarding' component={ Onboarding } />
        <Route path='/settings' component={ Settings } />
    </Switch>
</div>

// app/flows/onboarding/Onboarding/index.js
<div>
    <Route exact path={`${match.url}`} component={ Start }/>
    <Route path={`${match.url}/signup`} component={ SignUp }/>
    <Route path={`${match.url}/name`} component={ Name }/>
    <Route path={`${match.url}/structure`} component={ Structure }/>
    <Route path={`${match.url}/pricing`} component={ Pricing }/>
    <Route path={`${match.url}/continue`} component={ Continue }/>
</div>

// app/flows/onboarding/Start/index.js
<div className='start'>
    Start Page
</div>

I'm not sure where the error could be coming from or how to do this different.

I have three main routes:

I'd like to redirect to either /onboarding or /settings depending on login state. Once at either of these main routes, there will be sub routes.

What is the proper way to set these routes up with a redirect without causing a redirect error?

error on launching localhost:8080/:

enter image description here

Upvotes: 1

Views: 132

Answers (1)

Luke Willis
Luke Willis

Reputation: 8580

In your render function, change

<Route component={ Component } />

to

<Component />

Also, you shouldn't need to pass location as a prop into the Switch in App.

Upvotes: 1

Related Questions