React Router V4 обновляет URL-адрес, но не обновляет страницу
Я создаю простое приложение и пытаюсь использовать в нем реагирующий маршрутизатор, но у меня проблема. Когда пользователь нажимает кнопку регистрации или входа в систему, страница должна отображать необходимую форму, но теперь для изменения страницы пользователь должен обновить страницу, а затем компонент изменения страницы, я не знаю почему.
ReactDOM.render((
<BrowserRouter>
<App />
</BrowserRouter>
), document.getElementById('root'))
Класс приложения:
class App extends React.Component {
render() {
return (
<div className = "App">
<Navbar/>
</div>
);
}
}
Класс Navbar:
class Navbar extends React.Component {
render(){
return (
<Nav bsStyle = "tabs">
<LinkContainer to = "/login" >
<NavItem >
LogIn
</NavItem>
</LinkContainer>
<LinkContainer to = "/Register" >
<NavItem >
Register
</NavItem>
</LinkContainer>
<Router>
<BrowserRouter>
<Switch>
<Route path = "/Register" component = {Register} />
<Route path = "/Login" component = {Login} />
</Switch>
</BrowserRouter>
</Router>
</Nav>
)
}}
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
У вас есть маршрутизация внутри компонента Navbar, это не сработает.
Измените свой index.js, чтобы он выглядел так:
ReactDOM.render((
<BrowserRouter>
<Switch>
<Route path = "/Register" component = {Register} />
<Route path = "/Login" component = {Login} />
<Route path = "/" component = {App} />
</Switch>
</BrowserRouter>
), document.getElementById('root'))
Это должно сработать, дайте мне знать, если возникнут проблемы. Также удалите элементы и дочерние элементы BrowserRouter из Navbar.
Вам потребуется ваш BrowserRouter как компонент верхнего уровня. nav - это место, которое определяет, какой компонент должен быть визуализирован.
ReactDOM.render(<App />, document.getElementById('root'));
App.js
class App extends React.Component {
render() {
return (
<div className = "App">
<Navbar/>
<Router>
<BrowserRouter>
<Switch>
<Route path = "/Register" component = {Register} />
<Route path = "/Login" component = {Login} />
</Switch>
</BrowserRouter>
</Router>
</div>
);
}
}
Nav.js
class Navbar extends React.Component {
render(){
return (
<Nav bsStyle = "tabs">
<LinkContainer to = "/login" >
<NavItem >
LogIn
</NavItem>
</LinkContainer>
<LinkContainer to = "/Register" >
<NavItem >
Register
</NavItem>
</LinkContainer>
</Nav>
)
}}
@TomKarnaski Рад, что у вас все получилось. Если это решило проблему, выберите тот, который решил вашу проблему, чтобы это помогло другим искать ответы.
использовать BrowserRouter внутри маршрутизатора
<Router>
<BrowserRouter>
<Switch>
...
</Switch>
</BrowserRouter>
</Router>
Добавьте описание, объясняющее, почему ваше решение решает его проблему или что он сделал не так
Ваш
BrowserRouterдолжен быть компонентом верхнего уровня. А зачем вам их 2 на месте?