react-router routes with/yourRoute not /＃/ aRoute

Question

我是新來的react-router，想知道我是否可以在我的項目上獲得一些基本的東西。我有路由器運行，除了當我去我的路線​​（我唯一的路線），我得到「不能GET /約」，但當我去/#/about成功地去了路線，除了當我運行良好。使用鏈接也適用，但使用/#/about路由。總之我的項目是這樣的：

render((
    <Router history={hashHistory}> 
    <Route path="/" component={Layout}> 
     <Route path="/about" component={About}/> 
    </Route> 
    </Router> 
), 

的document.getElementById（ '應用'））

和

export default class Layout extends React.Component { 
    render() { 
    return (
     <div> 
     <nav class="navbar navbar-default navbar-fixed-top"> 
      <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
      <Link to="/" class="navbar-brand">React Router Test</Link> 
     </div> 
     <div id="navbar" class="collapse navbar-collapse"> 
      <ul class="nav navbar-nav"> 
      <li><Link to="/about">About</Link></li> 
      </ul> 
     </div> 
     </div> 
    </nav> 
    <div id="page"> 
    {this.props.children} 
    </div> 
    <footer class="footer"> 
     <div class="container"> 
     <p class="text-muted">Place sticky footer content here.</p> 
     </div> 
    </footer> 
    </div> 
); 
    } 
} 

和有關組件

const styles = {} 
styles.body = { 
    margin: 70, 
} 
export default React.createClass({ 
    render() { 
    return <div style={styles.body}>About</div> 
    } 
}) 

請讓我知道如何我可以讓應用識別​​而不僅僅是/#/about

Answer 1

根據您的版本react-router如何正確訪問和更改此可能會有所不同，但要點應該是相同的。

您當前正在使用哈希歷史記錄。這意味着您的網址將使用哈希來構建。另一種選擇是使用瀏覽器歷史記錄。這使得清潔URL www.example.com/about。

import { browserHistory } from 'react-router' 
render((
    <Router history={browserHistory }> 
    <Route path="/" component={Layout}> 
     <Route path="/about" component={About}/> 
    </Route> 
    </Router> 
), 

https://github.com/reactjs/react-router/blob/master/docs/guides/Histories.md

詩篇。如果上述不起作用，請參閱文檔反應路由器和您使用的版本。他們已經在這個部門進行了一些API更改和包更改（history包有效地爲此行爲提供支持）。