Почему роутинг не работает в React?

Question

[gorwhoami]

Недавно начал изучать React и уже возникли трудности. В общем вот код это App.js (т.е входная точка так сказать)

import {BrowserRouter, Route} from "react-router-dom";(импорт компонентов сделал)// npm install -s react-router-dom 
 // тоже сделал

class App extends React.Component {
    render() {
        return (
            <BrowserRouter>
                <Navigation /> // это верхнее меню нет смысла обернуть в <Route>
                <Route path='/news' render={()=> <News /> }/>
                <Route path='/videos' render={()=> <Videos />}/>
                <Route path='/walls' render={()=><Walls />}/>
            </BrowserRouter>
        )
    }
}

При нажатии на элементов страница перезагружается, не могу понять в чем напортачил?

Comments

[Mikhail Osher]

Navigation компонент тут самый главный, и Вы его код не показали

Answer 1

[kn1ght_t]

наверное, вы используете обычные теги ссылок (а):
<a href="/news">News</a>

а нужно использовать компонент Link из роутера:
<Link to="/news">News</Link>

update: для интеграции бутстрапа и реакт роутера нужно использовать https://github.com/react-bootstrap/react-router-bo...

Comments

[gorwhoami]

Нет сначала использовал из Bootstrap но не срабатывала маршрутизация.Потом сделал с (без точки) А теперь пропали стили из Bootstrap-а.

[kn1ght_t]

gorwhoami, ну так само собой, что Bootstrap под капотом использует обычные ссылки

[gorwhoami]

Ну так как сделать чтобы было и то и другое?
Изменено: А! Не заметил изменение. Спасибо посмотрю )

Answer 2

[John Developer]

Чтобы не было полной перезагрузки страницы, я бы на Вашем месте попробовал заменить текущий роутинг на NavLink - ссылка на git.

<NavLink to="/about">About</NavLink>

Comments

[gorwhoami]

Да я именно это и сипользовал но мне нужно было стилизовать все это с Bootstrap, а там нужно написать во т я и сделал таким образом и все сломалось,потом вернул все как бвло и теперь не знаю что делать чтобы было и то и другое(и стили и роутинг)