mercredi 3 mai 2017

Prevent "url action" from React Router

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. Before click After click

But when I pressed Enter or right click and 'Open Link in a new Tab' an error message is visible (Cannot GET /140009647639368)

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'));




Aucun commentaire:

Enregistrer un commentaire