2016-06-22 6 views
0

Я изучаю Реактивы и маршруты.ReactJs Nice Url With {hashHistory}

Таким образом, проблема заключается в том, что маршруты работают, b ut они добавляют это к URL-адресу "/ #/AboutUs? _k = gb8gte".

Как я могу это сделать, чтобы Url был удобен для пользователя? Просто что-то вроде/ABOUTUS

ReactDOM.render(
<Router history={hashHistory}> 
    <Route path="/" component={Layout}> 
     <Route path="Today" component={Today}></Route> 
     <Route path="EndingSoon" component={EndingSoon}></Route> 
     <Route path="AboutUs" component={About}></Route> 
     <Route path="Contact" component={Contact}></Route> 
    </Route> 
</Router> 
, app); 

И это nav.js

import React from "react"; 
import ReactDOM from "react-dom"; 
import { Link } from 'react-router' 

export default class Nav extends React.Component { 
render() { 
    return(
     <nav> 
      <Link to="Today">Today</Link> 
      <Link to="EndingSoon">Ending Soon</Link> 
      <img src="img/logo.png"/> 
      <Link to="AboutUs">About Us</Link> 
      <Link to="Contact">Contact</Link> 
     </nav> 
    ); 
} 
} 

ответ

3

Для того, чтобы получить чистые (дружественный пользователю) URLs, вам придется настроить сервер. И используйте browserHistory вместо hashHistory.

Обратите внимание на следующее руководство от реактивного маршрутизатора.

https://github.com/reactjs/react-router-tutorial/tree/master/lessons/10-clean-urls

Надеется, что это помогает!

+0

Когда я использую {browserHistory}, он возвращает пустой экран (без ошибок в консоли). – xoomer

+1

Вы настроили сервер? –

+0

@xoomer [Есть причина, по которой «hashHistory» является значением по умолчанию] (https://github.com/reactjs/react-router/blob/master/docs/guides/Histories.md#should-i-use-hashhistory) – Kujira