React-Router only rendering the first route

[jenkynolasco11]

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]

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]

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]

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]

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?