防止来自React Router的“ URL操作/加载”

Question

我希望我是React Router的新手，我试图做一件简单的事情。 确实，我想防止浏览器尝试加载URL，希望我会清楚。

实际上，我有一个带有多个按钮的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 。