CODEWITHSUNDEEP
javascriptreactjspathreact-routerurl-routing
Valip
Valip

Reputation: 4620

React route from another file is rendered on every path

I'm trying to separate routes into their own file, but they seem to be always rendered, even if I've added exact to the path.

Home route - home.js:

import React from 'react';
import { BrowserRouter as Route } from 'react-router-dom';

import { HomePageView } from 'components'

const HomeRoute = () => (
  <Route exact path='/home'>
    <HomePageContainer />
  </Route>
)
export default HomeRoute;

HomePageView.js:

import React from 'react';

class HomePageView extends React.Component {
  render() {
    return (
      <div>Some text here</div>
    )
  }
}

export default HomePageView;

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route } from 'react-router-dom';

import HomeRoute from 'routes/home'
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <Router>
    <HomeRoute />
  </Router>,
  document.getElementById('root')
);

The problem is that it renders the HomePageView component on any path and I don't understand why this happens because it works as expected if I replace <HomeRoute /> from index.js with:

  <Route exact path='/home'>
    <HomePageContainer />
  </Route>

Upvotes: 0

Views: 739

Answers (1)

Henrik
Henrik

Reputation: 382

I haven't tested this myself, but isn't the problem that you are importing BrowserRouter as Route in your home.js?

The file would looks like this when rendered:

  <BrowserRouter>
    <BrowserRouter>
       <HomePageContainer/>
    <BrowserRouter/>
  <BrowserRouter/>

You need to import route from react-router-rom like this import { Route } from "react-router-dom";

"as" in import is an alias, not what is imported.

Fixed home.js file:

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

const HomeRoute = () => (
  <Route exact path='/home'>
    <HomePageContainer />
  </Route>
)
export default HomeRoute;

Upvotes: 1

Related Questions