防止來自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 。