CODEWITHSUNDEEP
javascriptreactjsreact-routerreact-router-v4
Al-m
Al-m

Reputation: 127

How do I handle Multiple Routes In App.js?

I'm new to react and now learning react-router.

I am trying to have multiple routes within the BrowserRouter and I am not sure why it isn't working.

My code is this 

import React, { Component } from 'react';
import {database} from '../firebase';
import _ from 'lodash';

import ReactDOM from 'react-dom';
import {BrowserRouter, Route, Switch, Link} from 'react-router-dom';

import List from './List';
import NewPost from './NewPost';

class App extends Component {


  render() {
    return (
      <div className="App container">
      <header className="App-header">

          <h1 className="App-title">Here We Go Again</h1>
        </header>
        <hr/>
       <BrowserRouter>
        <Switch>
          <Route path='/' component={List}/>
          <Route path='/new' component={NewPost}/>
        </Switch>
      </BrowserRouter> 
      </div>

    );
  }
}

export default App;

Regardless of the path I go to, it only shows the first one in the list. I have tried moving them around so I know that for sure. And the functionality of them all still work. It's just a matter of rendering them one at a time.

      <BrowserRouter>
        <Switch>
          <Route path='/' component={List}/>
          <Route path='/new' component={NewPost}/>
        </Switch>
      </BrowserRouter>

As you can see I tried some other possible solutions on stack overflow liek adding Switch but it still didn't work.

Any idea how to fix it or what I'm doing wrong?

Upvotes: 0

Views: 1747

Answers (1)

Luke Schlangen
Luke Schlangen

Reputation: 3882

You need to add the word exact to the first route. It is currently matching anything with a /.

  <BrowserRouter>
    <Switch>
      <Route path='/' exact component={List}/>
      <Route path='/new' component={NewPost}/>
    </Switch>
  </BrowserRouter>

Upvotes: 4

Related Questions