防止来自React Router的“url action / load”

Question

我是反应路由器的新手，我希望能做一件简单的事情。确实，我想阻止我的浏览器尝试加载网址，我希望我会清楚。

实际上我有一个带有多个按钮的NavBar，当我点击其中一个按钮时，URL改变了但没有发生任何事情，渲染完全相同。

但是，当我按 Enter 或右键点击'在新标签页中打开链接'时，会显示一条错误消息

这是我想要修复以获得与之前相同的结果。

我给你下一个代码示例来帮助你。我希望我很清楚，并提前感谢你的帮助。

    *`navbarComponent.js`*


        render(){
            return (
                <Navbar inverse fluid>
                  <Navbar.Header>
                    <Navbar.Brand>
                      Beam Viewer
                    </Navbar.Brand>
                    <Navbar.Toggle />
                  </Navbar.Header>
                <Navbar.Collapse>
                  <Nav>
                    {this.props.BpmList.map((bpm, index) => (
                      <LinkContainer key={index} to={'/'+bpm.key}><NavItem>{bpm.name}</NavItem></LinkContainer>
                    ))}
                  </Nav>
                </Navbar.Collapse>
              </Navbar>
           );

          }

    -----------------------------------------------------------------------------

   *index.js*

        class Main extends React.Component{

        componentWillReceiveProps(nextProps){

          console.log(nextProps);

        }

          render(){
            return (
              <div>
                <NavBar />
                <Options />
                <Infos />
                <Video />
              </div>
            )
          }
        }



    ReactDom.render(<Provider store={store}>
                    <Router history={browserHistory}>
                      <Route path='/' component={Main}/>
                      <Route path='/:bpmKey' component={Main}/>
                    </Router>
                    </Provider>,
                    document.getElementById('main'));

Answer 1

当您这样做时，浏览器会尝试从您的服务器获取此路由。由于您的服务器没有它，它会显示错误。使其运作的一种方法是使用hashHistory代替browserHistory。