Prevent “url action/load” from React Router

Question

I'm new with react router and I tried to do one simple thing, I hope. Indeed I want to prevent my browser to try to load an url, I hope I'll be clear.

In fact I have a NavBar with multiples buttons on it and when I click on one of them, the URL changed but nothing happend, the render is exactly the same.

But when I pressed Enter or right click and 'Open Link in a new Tab' an error message is visible

It's what I want to fix to obtain the same result as previous.

I put you next sample of code to help you. I hope I was clear and thanks in advance for you help.

    *`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

When you do that, the browser tries to get this route from your server. Since your server doesn't have it, it shows that error. One way to make it work, is to use hashHistory instead of browserHistory .