<使用<Switch>

时间:2019-08-03 17:41:46

标签: javascript reactjs react-router

我是新来的反应者,我创建了一些路线。据我所读,正确的方法是使用将路由分组的交换机,当我这样做时,具有相同路由的链接之一将不再起作用。

在导航栏中的设置方式我有一个徽标链接,可以转到/ find路线,正如您在导航栏中看到的那样,我还有一个导航栏链接,用于查找客户。此路由/链接与交换机配合使用,徽标链接无效。

我删除“切换所有”链接后,该链接就会再次起作用。

_---------------------------------_
    //Main JS
      render() {

        return (
            <div>

              <Nav />
{/* <Switch> */}

              <Route exact path='/create' component={Createcust}/>

              <Route exact path='/find' render={(props) => <Findcust theCust = {this.state.allUsers} searchRes = {this.searchRes} />}/>
              <Route exact path='/find' render={(props) => <FoundCust theCustomers = {this.state.searched} loading={this.state.loading} />}/>
              <Route exact path='/customerInfo/:custid' component={CustomerInfo} />
              <Route exact path='/DelUser/:custid' component={DelUser} />


{/* </Switch> */}
            </div>
        )
    }


_----------------------------------_
//Navbar Comp

    render() {
        return (
            <div>
     <nav>
    <div className="nav-wrapper">
      <Link to ="/find" className="brand-logo">Logo </Link>
      <ul id="nav-mobile" className="right hide-on-med-and-down">
        <li><NavLink exact to="/create">Create A Customer</NavLink></li>
        <li> <NavLink exact to="/find">Find A Customer</NavLink></li>
      </ul>
    </div>
  </nav>

            </div>
        )

0 个答案:

没有答案