来自另一个文件的 React 路由在每个路径上呈现

Question

我正在尝试将路由分隔到它们自己的文件中，但它们似乎总是被渲染，即使我已将 exact 添加到 path。

回家路线 - 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>

Answer 1

我自己没有测试过这个，但是你在 home.js 中将 BrowserRouter 作为 Route 导入不是问题吗？

渲染后的文件如下所示：

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

你需要像这样从 react-router-rom 导入路由import { Route } from "react-router-dom";

import 中的"as" 是别名，而不是导入的内容。

修复 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;