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替换为： / p>

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

Answer 1

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

文件在呈现时如下所示：

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

您需要像这样import { Route } from "react-router-dom";

从react-router-rom导入路由导入中的

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

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

1 个答案: