CODEWITHSUNDEEP
reactjsreact-routerreact-router-v4react-router-dom
danillosl
danillosl

Reputation: 519

react router 4 switch showing two components

I'm trying to split my routes into many files, to achieve this I have a central file called routes.

import React from "react";
import { Router, Route, Switch } from "react-router-dom";
import history from "./History";
import StreamRoutes from "./stream/StreamRoutes";

const Routes = props => {
  return (
    <React.Fragment>
      <Router history={history}>
        <Switch>
          <Route path="/" exact component={props => <h1>hello world</h1>} />
          <StreamRoutes />
        </Switch>
      </Router>
    </React.Fragment>
  );
};

export default Routes;

and then a route file for all the main component like so: 

import React from "react";
import { Route } from "react-router-dom";

import StreamCreate from "./components/StreamCreate";
import StreamEdit from "./components/StreamEdit";
import StreamList from "./components/StreamList";
import StreamShow from "./components/StreamShow";

const StreamRoutes = props => {
  return (
    <React.Fragment>
      <Route path="/streams" exact component={StreamList} />
      <Route path="/streams/new" exact component={StreamCreate} />
      <Route path="/streams/:id" exact component={StreamShow} />
      <Route path="/streams/edit/:id" exact component={StreamEdit} />
    </React.Fragment>
  );
};
export default StreamRoutes;

this works except when I try to access "/streams/new" or "/streams/:id", in any of those cases the router show both components at once.

I would like to know how to fix this or a better way to organize my routes would be highly appreciated.

Upvotes: 1

Views: 257

Answers (1)

milo
milo

Reputation: 976

It is possible to use a regex like FuzzyTree suggest, but this can get messy in a bigger project. I would suggest replacing React.Fragment in your StreamRoutes with Switch. This way it works like you'd expect.

Upvotes: 1

Related Questions