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

import NewSnippet from './NewSnippet';
import RecentSnippets from './RecentSnippets';
import Snippet from './Snippet';
import About from './About';
import SignIn from './SignIn';

import '../styles/Main.styl';

const Main = () => (
  <main className="main">
    <Switch>
      <Route exact path="/" component={NewSnippet} />
      <Route path="/recent" component={RecentSnippets} />
      <Route path="/about" component={About} />
      <Route path="/sign-in" component={SignIn} />
      <Route path="/:id" component={Snippet} />
    </Switch>
  </main>
);

export default Main;

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

import NewSnippet from './NewSnippet';
import RecentSnippets from './RecentSnippets';
import Snippet from './Snippet';
import About from './About';
import SignIn from './SignIn';

import '../styles/Main.styl';

const Main = () => (
  <main className="main">
    <Switch>
      <Route exact path="/" component={NewSnippet} />
      <Route exact path="/recent" component={RecentSnippets} />
      <Route exact path="/about" component={About} />
      <Route exact path="/sign-in" component={SignIn} />
      <Route exact path="/:id(\d+)" component={Snippet} />
    </Switch>
  </main>
);

export default Main;

Use exact routes to pages
Use exact routes to pages

By default, react route matches a URI (let's say) greedy which means the
following route:

 <Route path="/about" ... />

will match the following URIs:

 /about
 /about/
 /about/foo
 /about/foo/bar

Well, that's not what would we expect. That's why we want to set 'exact'
option on routes, so only two cases would be allows for the example
above:

 /about
 /about/

Any other options will end up with 404 Not Found.
