ReactJs中的Router

问题描述

我对React Js很陌生，并且陷入了一个问题。 “根”组件下有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的路径，但其他组件仍然存在。我只希望同时显示一个组件。

解决方法

您在这里。您应该使用Router和Route组件为每个视图/页面渲染组件。 Link库中的react-router-dom组件应用于在视图之间导航。我还建议从Router组件中删除大部分HTML。

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';
};

伙伴，您对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>

react-router reactjs reactjs