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'));
Aucun commentaire:
Enregistrer un commentaire