如何将主页内容与反应路由器中的其余页面分开？

Question

我正在尝试创建一个包含多个页面的反应应用程序，每个页面确实具有不同的内容。我使用过（或者至少尝试过，因为我猜这就是整个混乱的原因）反应路由器。我想将所有链接放入引导导航栏。问题是：当我从主页转到另一个页面时，主页中的内容会在其他页面的内容之上重复出现。假设我的主页返回“主页”并且关于返回“关于”然后在 /about 两者 将出现“主页”和“关于”。我该如何解决这个问题？

Navbar.js：

function Navigation() {
  const [collapsed, setCollapse] = useState(false);

    return (
      <Navbar className="navbar navbar-expand-lg navbar-dark" light expand="md" sticky="top">
        <NavbarBrand href="/">Home</NavbarBrand>
        <NavbarToggler onClick={changeCollapse} className="ml-auto" />
        <Collapse isOpen={collapsed} navbar>
        <Nav className='mr-auto' navbar>
            <NavItem>
                <NavLink href="/about" className="active">About</NavLink>
            </NavItem>
          </Nav> 
        </Collapse>
      </Navbar>
    )

App.js：

...
import {Route, BrowserRouter} from "react-router-dom";
...
function App() {
  return (
      <div>
        <BrowserRouter>
          <Route path='/' component={Home}/>
          <Route path='/about' component={About}/>
        </BrowserRouter>
      </div>
  );
}

Answer 1

你应该使用'Switch'和exact这样的路由

...
import {Route, BrowserRouter, Switch} from "react-router-dom";
...
function App() {
  return (
      <div>
        <BrowserRouter>
          <Switch>
           <React.Fragment>
             <Route exact={true} path='/' component={Home}/>
             <Route exact={true} path='/about' component={About}/>
           <React.Fragment>
          </Switch>
        </BrowserRouter>
      </div>
  );
}