Маршрут реакции из другого файла отображается на каждом пути - PullRequest
Новая
       88

Маршрут реакции из другого файла отображается на каждом пути

0 голосов
/ 29 мая 2020

Я пытаюсь разделить маршруты в отдельный файл, но кажется, что они всегда отображаются, даже если я добавил exact к 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')
);

Проблема в том, что он отображает HomePageView компонент на любом пути, и я не понимаю, почему это происходит, потому что он работает должным образом, если я заменю <HomeRoute /> из index.js на: 

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

1 Ответ

1 голос
/ 29 мая 2020

Я сам это не тестировал, но проблема заключается не в том, что вы импортируете BrowserRouter как Route в свой дом. js?

Файл при рендеринге будет выглядеть так: 

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

Вам нужно импортировать маршрут из response-router-rom следующим образом import { Route } from "react-router-dom";

«as» в import - это псевдоним, а не то, что импортируется.

Fixed home . js файл: 

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;
...