Experiencing Strange Problems With React Router


(Andreas Skaalerud) #1

Hi there. I have been experiencing a rather strange problem with React Router over the last two weeks, and it’s honestly driving me crazy. I am trying to create a URL using parameters, but when I do it I only get a 404 error. This is what my code looks like right now (and yes, I have also tried to wrap it - which I found out that some people did to fix this very problem):

 const websiteRoutes = (
    <BrowserRouter>
    <div>
        <Switch>
            <Route path="/" component={Index} exact={true}/>
            <Route path="/admin" component={Admin}/>
            <Route path="/admin_panel" component={AdminPanel}/>
            <Route path="/message/id/:id" component={ReadMessage}/>
            <Route path="/sitemap.xml"/>
            <Route path="/robots.txt"/> 
        </Switch>
    </div>
    </BrowserRouter>
);

So this is what’s up; all of the spesified URLs listed above works, except the ‘/message/id/:id’. Nor does it work if I just set it to ‘/message/id’, but it does work if I remove the ‘/id’ as well, making it only ‘/message’ or ‘/:id’. What seems to be the problem here? I asked this question on StackOverflow as well, but no one has really seemed to get a grasp of what’s causing this. So therefore I thought I would ask you, and it would mean a lot to me if you could help.


(Mattishii) #2

Are you using react-router-dom? I copied your code over here, with some extra details, and everything seems good to me.


Go here to see that the id is matched
https://x318n2614o.codesandbox.io/message/id/1


(Alice Chuang) #3

I am having a similar issue and am here searching for answers too. e.g.

<Route exact path="/portfolio/new" component={Portfolio} />
<Route exact path="/portfolio" component={Portfolio} />

All my routes work except when I add a second subdirectory like ‘/portfolio/new’. It’s true for anything similar.

‘/bio’ works but not ‘/bio/new’

And so one. It looks looks like it’s going to the 404 page I have setup in my Express Routes. Yet when I use

‘/random’ it routes properly to my react Browser Router * route.


(Andreas Skaalerud) #4

That’s the strange thing. It doesn’t work for me, and I have no idea why.


(Andreas Skaalerud) #5

This pretty much sums up my problem as well, and as far as I know - very few people has any experience with this. It would be great to find a solution for this.