时间戳

首页 > 解决方案 > 使用反应js_在下一页上没有路由按钮导航到按钮单击时的全新页面

javascript - 使用反应js_在下一页上没有路由按钮导航到按钮单击时的全新页面

问题描述

我一直在尝试使用Route/BrowserHistory从一个页面导航到另一个页面，但他们所做的是路由器按钮位于页面顶部。但是，我想导航到不包含该路由按钮的完全不同的页面。

例如，在我的情况下，我的第一页由两个按钮Configuration和User Portal组成。单击任何按钮时，我想在单击User Portal时跳转到新页面，即 UserPortal 页面。

这是我的代码：

<div className="App">
   <BrowserRouter>
      <div>
        <nav aria-label="breadcrumb">
          <ol className="breadcrumb" style={{background: 'none'}}>
             <div className="breadcrumb-item">
                <Link to="configuration">
                  <button className='btn btn-primary' id='config' >Configuration</button>
                </Link>
             </div>
             <div className="breadcrumb-item">
                <Link to="userPortal">
                  <button className='btn btn-primary' id='portal' >User Portal</button>
                </Link>
             </div>
          </ol>
        </nav>
        <Switch>
           <Route path="/configuration" component={ArduinoInterface} />
           <Route path="/userPortal" component={UserPortal} />
        </Switch>
     </div>
  </BrowserRouter>
</div>

我应该怎么做才能得到想要的结果？

您的帮助将不胜感激！谢谢。

标签： javascriptreactjsreact-navigation

解决方案

这就是我解决问题的方法。我遵循了这个例子，它奏效了。

索引.js

ReactDOM.render(<Router history={history}>
    <Routes />
  </Router> , document.getElementById('root'));

路由.js

<Switch>
     <Route path="/" exact component={MainPage} />
     <Route path="/configuration" component={ArduinoInterface} />
     <Route path="/userportal" component={UserPortal} />
     <Route component={MainPage} />
</Switch>

MainPage.js

<div>
    <button type="button" id='config'><Link to='/configuration'>Configuration</Link></button>
</div>
<div >
    <button type="button" id='portal'><Link to='/userportal'>User Portal</Link></button>
</div>

推荐阅读