Javascript react路由器不在路由中时显示组件的问题

我正在使用react路由器，它的行为有一些困难

导航将根据需要显示在所有页面上。但是，配置文件也会显示在所有页面上。我只想在/home以及/music和/players页面上显示此内容，确实如此。然而，它也显示在/charts页面上，这让我很困惑

我的代码如下所示

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

import Nav from './components/Nav'
import Profile from './components/Profile'
import Players from './components/Players'
import Music from './components/Music'
import Charts from './components/Charts'

const App = () => {

  return (
    <section>

      <Nav />

      <Route path="/home">
        <div>
          <Profile avatarUrl={ avatarUrl }/>
          <Route path="/players" component={Players}/>
          <Route path="/music" component={Music}/>
        </div>
      </Route>

      <Route path="/charts" component={Charts}/>

    </section>
  )
}

export default App;

我已经阅读了文档，尝试加入一个交换机组件，将其添加到主路由中，但这会导致其他意外行为

谁能告诉我哪里做错了

谢谢你，皮特

试试这个：

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

import Nav from './components/Nav'
import Profile from './components/Profile'
import Players from './components/Players'
import Music from './components/Music'
import Charts from './components/Charts'

const Home = ({match}) => {
    return (
    <div>
      <Profile avatarUrl={ avatarUrl }/>
      <Route path=`${match.url}/players` component={Players}/>
      <Route path=`${match.url}/music` component={Music}/>
    </div>
  );
};

const App = () => {

  return (
    <section>

      <Nav />
      <Router>
        <Switch>
          <Route path="/charts" exact={true} component={Charts}/>
          <Route path="/home" component={Home} />
        </Switch>
      </Router>

    </section>
  )
}

export default App;

我还没有测试过这个，但是应该可以

假设您使用的是react router v4，我不知道您是否能够以您使用的方式实际使用您的主路由

在上面的代码中，Switch基本上呈现它下面指定的路由之间的第一个匹配。确切的关键字将确保只有/charts path将显示charts组件

主组件将在以/Home开头的任何路径中渲染。 现在，对于path/home/players，您将看到配置文件和players组件，而对于path/home/music，您将看到其他组合

希望这有帮助

编辑： 在代码中添加了路由器

编辑： 此处提供的工作代码： 将右侧的路线更改为： /家 /主场/球员 /家庭/音乐

---

/图表

嘿，皮特！你为什么把播放器和音乐线路放在家里？加载主路由时是否要渲染播放器和音乐？TypeError:无法读取未定义的属性“url”不知道匹配项是什么？你正在路由器中的某个位置包含应用程序，对吗？为什么我的配置文件路由显示在图表中仍然没有意义组件这样做了吗？你可以尝试添加路由器元素吗？我已将其添加到示例代码中。我不确定为什么要呈现配置文件路由，但react router v4不支持原始代码中使用的嵌套路由。