Skip to content

React-Router only rendering the first route #6163

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
jenkynolasco11 opened this issue May 20, 2018 · 4 comments
Closed

React-Router only rendering the first route #6163

jenkynolasco11 opened this issue May 20, 2018 · 4 comments

Comments

@jenkynolasco11
Copy link

jenkynolasco11 commented May 20, 2018

Situation:

I've done work with React-Router before, but after updating to +16.3, all went downhill from there. Been reading in the issues here to see if I could find a similar situation, and it seems the new context api is breaking react router (as seen in this thread), but then I proceeded to do something smaller to see if there was a way to go around it, and it didn't work. Then went back into something basic, and nothing! It always renders the first Route on Switch despite the fact I'm telling Redirect to render another one.

Note: The project was created using create-react-app, so webpack configuration was not changed.

Test Case

Routes are broken. React Router always renders first route on Switch, even tho Redirect component has another route to render to render first.

Steps to reproduce

import { BrowserRouter as Router, Route, Switch, Redirect, Link } from 'react-router-dom'

class App extends Component {
    render() {
        return (
            <Router>
               <Switch>
                   <Route exact path="/ticket" component={ Comp1 } />
                   <Route exact path="/ride" component={ Comp2 } />
                   < Route exact path="/bus" component={ Comp3 } />
                   <Route exact path="/user" component={ Comp4 } />
                   <Redirect from="/*" to="/ride" />
               </Switch>
            </Router>
        )
    }
}

const Comp1 = (...props) => {
    console.log(props)
    console.log(`THIS IS COMP${1}`)
    return (
        <div>
            <Link to="/ride">TO RIDE</Link>
        </div>
    )
}
const Comp2 = (...props) => {
    console.log(props)
    console.log(`THIS IS COMP${2}`)
    return (
        <div>
            <Link to="/user">TO USER</Link>
        </div>
    )
}
const Comp3 = (...props) => {
    console.log(props)
    console.log(`THIS IS COMP${3}`)
    return (
        <div>
            <Link to="/ticket">TO TICKET</Link>
        </div>
    )
}
const Comp4 = (...props) => {
    console.log(props)
    console.log(`THIS IS COMP${4}`)
    return (
        <div>
            <Link to="/bus">TO BUS</Link>
        </div>
    )
}

Expected Behavior

First, to render the Redirect route, then switch routes when clicked on Links.

Actual Behavior

Renders first Route on Switch, even when is not the first one it should render while using Redirect.

@timdorr
Copy link
Member

timdorr commented May 20, 2018

Can you drop this into codesandbox.io? What URL are you hitting? This might be as simple as a misunderstanding of the API, but there is missing information needed to determine that.

@jenkynolasco11
Copy link
Author

Sure thing.

Here is the link.

I'm hitting the ones by the Link rendered in the first component, but then it doesn't go anywhere. :\

I feel I haven't missed anything because I followed another project schema I have similar to the one I had first before narrowing it down to the most simple example shown in the codesandbox link.

@andreiglingeanu
Copy link

I think I just stumbled upon that one too. I'll provide a small reproduction demo and will try to narrow down the problem

Thanks for the awesome work!

@jenkynolasco11
Copy link
Author

I'll be closing this issue because I found out what my problem was (or at least a workaround).

First, when I wrote the basic example that wasn't working, I misused one of the properties. Instead of "path", I wrote "route". Welp, problem solved.

Second, the issue was mostly when I wanted to export the Switch component in one file, and then import it to another with the Router component... Something like this:

// file1.js

import React from 'react'
import { Route, Switch, Link } from 'react-router-dom'

const Comp1 = () =>(
        <div>
            <Link to="/ride">TO RIDE</Link>
        </div>
    )
const Comp2 = () => (
        <div>
            <Link to="/user">TO USER</Link>
        </div>
    )

const Comp3 = () => (
        <div>
            <Link to="/ticket">TO TICKET</Link>
        </div>
    )

const Comp4 = () => (
        <div>
            <Link to="/bus">TO BUS</Link>
        </div>
    )

const Body = () => (
            <Switch>
                <Route exact path="/ticket" render={ Comp1 } />
                <Route exact path="/ride" render={ Comp2 } />
                <Route exact path="/bus" render={ Comp3 } />
                <Route exact path="/user" render={ Comp4 } />
            </Switch>
        )

export default Body


// file2.js

import React from 'react'
import { BrowserRouter as Router } from 'react-router-dom'

import Routes from './file1'

const App = () => (
            <Router>
                    <Routes />
            </Router>
        )

export default App

Anyways, I'm closing this since I'll have to go around with another solution. Is there any explanation why this doesn't work this way?

@lock lock bot locked as resolved and limited conversation to collaborators Jul 19, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants