react-router - 反応ルーター V4 ナビゲーションの問題

Question

アプリケーション用に以下のルーター設定があります。App.js には以下のコードが存在します。

 <Switch>
    <Route exact path="/" component={SignIn} />
    <Route path="/home" component={Home}/>
    <Route path="/about" component={About}/>
    <Route exact path="/signin" component={SignIn} />
  </Switch>

[About component] の下に別のサブ部門があるため、「About」の下にあるコンポーネントのルーティングを個別に保持しました。About(/about) コンポーネントで

class About extends Component {
render() {
  return (
    <div>
      <h3>From AboutUs page</h3>
      <Switch>
        <Route exact path='/about' component={AboutIndex}/>
        <Route path='/about/details' component={Aboutdetails}/>
      </Switch>
    </div>
  );
 }
}

「AboutDetails」リンクをクリックすると、アドレス「/about/details」にルーティングされます。次に、「/」または「/home」コンポーネントまたは「/signin」コンポーネントとしてホームページリンクをクリックしようとすると、 "/about/" または "/about/home" または "/about/signin" としてのアドレス。 about コンポーネント内にあるコンポーネントをクリックします。ただし、「/about」コンポーネントではありません。この問題の解決方法を教えてください。

リンクが宣言されている以下のヘッダー コードを見つけます。

<Nav>
            <LinkContainer to="/home" activeClassName="active">
              <NavItem eventKey={1}>Home</NavItem>
            </LinkContainer>
            <LinkContainer to="/about" activeClassName="active">
              <NavItem eventKey={2}>About</NavItem>
            </LinkContainer>
            <LinkContainer to="/signin" activeClassName="active">
              <NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
                <LinkContainer to="/home" activeClassName="active">
                  <MenuItem eventKey={3.1}>Home</MenuItem>
                </LinkContainer>
                <LinkContainer to="/about" activeClassName="active">
                  <MenuItem eventKey={3.2}>AboutUs action</MenuItem>
                </LinkContainer>
                <MenuItem eventKey={3.3}>Something else here</MenuItem>
                <MenuItem divider />
                <MenuItem eventKey={3.4}>Separated link</MenuItem>
              </NavDropdown>
            </LinkContainer>
          </Nav>