ReactJs 中的路由器答案

【问题标题】：Router In ReactJsReactJs 中的路由器
【发布时间】：2020-10-08 20:34:31
【问题描述】：

我对 React Js 非常陌生，并且遇到了一个问题。 Root 组件下有 3 个组件，我想要做的是单击三个组件中的任何一个，我试图显示另一个组件。但问题在于单击所需的组件已加载，但其他组件仍保留在页面上。请在这里提出需要做什么。

    <div className="App">
      <Navbar />
     <Router>
      <div className="container" style={{ marginTop: '20px' }}>
      <div className="row">
        <div className="col s4">
          <AddCustomer />
        </div>
        <div className="col s4">
          <Switch>
            <Route exact path="/viewcustomers" component={ViewCustomer} />
          </Switch>
        </div>
        <div className="col s2 offset-s1">
          <Notifications />
        </div>
        </div>
         <div className="row">
        <div className="col s4">
          < EditCustomer />
         </div>
        </div>
       </div>
      </Router>
       </div>

这里转到加载 ViewCustomer 的路径，但其他组件仍然存在。我当时只想展示一个组件。

【问题讨论】：

标签： reactjs react-router

【解决方案1】：

给你。您应该使用Router 和Route 组件来呈现每个视图/页面的组件。 react-router-dom 库中的 Link 组件应该用于在视图之间导航。我还建议将大部分 HTML 从 Router 组件中分离出来。

const App = () => (
  <div className="App">
    <Navbar />
       <Router>
         <Switch>
           <Route component={HomeView} exact path='/' />
           <Route component={CustomerView} exact path='/viewcustomers' />
         </Switch>
    </Router>
  </div>
);

// Component to render when at '/'
const HomeView = () => {
  return (
    <div className="container" style={{ marginTop: '20px' }}>
      <div className="row">
        <div className="col s4">
          <AddCustomer />
        </div>
        <div className="col s4">
          <Link to='/viewcustomers' />
        </div>
        <div className="col s2 offset-s1">
          <Notifications />
        </div>
        </div>
         <div className="row">
        <div className="col s4">
          <EditCustomer />
        </div>
      </div>
    </div>
  );
};

// Component to render when at '/viewcustomers'
const CustomerView = () => {
  // Create customer view here
  return 'customers';
};

【讨论】：

谢谢，这很有帮助:)

【解决方案2】：

伙计，您对 React Router 的理解一团糟。您的代码的问题是其他组件（<AddCustomer /> 和 <EditCustomer />）在 Switch 之外并且没有标记为任何 URL 模式，因此呈现在您所在的任何 URL 路径中。

您的代码应如下所示：

    <BrowserRouter>
        <div className="App">
            <Navbar />
            <Switch>
                <Route exact path="/addcustomers" component={AddCustomer} />
                <Route exact path="/viewcustomers" component={ViewCustomer} />
                <Route exact path="/editcustomers" component={EditCustomer} />
            </Switch>
        </div>
    </BrowserRouter>

【讨论】：