Как сделать сайт без перезагрузки на react.js?

Question

[Егор]

использую react-router и есть примерно вот такой код

ReactDOM.render(
	<Router history={hashHistory}>
		<Route path="/" component={Contents}>
			<IndexRoute component={MainContent}/>
			<Route path=":id" component={MoreItemSite} />
		</Route>
	</Router>
	, document.getElementById('app')
);

на сервере все работает хорошо, без перезагрузки страницы все рендериться. Но из hashHistory адрес получается некрасивым. Вообщем hashHistory заменил на browserHistory и
в .htaccess прописал следующие

RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

Тогда все ссылки нормально переходят и адрес выглядит нормально, НО страница при этом перезагружается. Как можно исправить эту проблему с использованием browserHistory ?

Answer 1

[Слава]

Ничего вы не разобрались, а написали кривенький хак :) Для внутренних ссылок в react-router есть элемент Link<Link to="some-path">SOme path</Link>
Он-то и решает вашу задачу

Comments

[Егор]

Почему кривенький? у меня ссылки находятся в другом компоненте. Они перерендариваются каждый раз и Link их не ловит вообщем.

[Слава]

Ваш ответ - ещё одно подтверждение того, что с темой вы не особо разобрались :)
Link - это просто реактовский компонент, который делает под капотом то, на что вы потратили лишние три строчки кода и один метод

[Егор]

Слава: Вообщем я не знаю что это за магия, но когда я пробовал использовать Link ничего не работало, попробовал сейчас все работает также без изменений. втф?

Answer 2

[Егор]

Вообщем разобрался. Повесил событие onClick на ссылку

this.viweMoreItem = (e) => {
			e.preventDefault();
			const path = `${this.state.data.id}`;
			browserHistory.push(path);
		};

Теперь все работает как надо.