React.jsでのルーティングのしくみ

Question

私は以下の作業をしていますreact project、そしてnavbarの相対リンクを正しく動作させようとしています。私は私についてをクリックしたときしかし、私は、以下の、

App.js

// This component handles the App template used on every page. 
import React, {PropTypes} from 'react'; 
import Header from './common/Header'; 
import NavBar from './common/navbar'; 
import Router from 'react-router'; 
import { Link, IndexLink } from 'react-router'; 

var navbar = {}; 
navbar.brand = {linkTo: "http://chrisrjones.com", text: "chrisrjones.com"}; 
navbar.links = [ 
    // <Link to="/about" activeClassName="active">About</Link> 
    {linkTo: "/about", text: "About Me"}, 
    {linkTo: "#", text: "Contact"}, 
    {dropdown: true, text: "Contribute", links: [ 
     {linkTo: "#", text: "Sign Up"}, 
     {linkTo: "#", text: "Login"} 
    ]} 
]; 

class App extends React.Component { 
    render() { 
     return (
      <div className="container-fluid"> 
       <NavBar {...navbar}/> 
       <Header/> 
       {this.props.children} 
      </div> 
     ); 
    } 
} 

App.propTypes = { 
    children: PropTypes.object.isRequired 
}; 

export default App; 

のようなルックスで働いていたコードは、次の応答を取得

Cannot GET /about 

また、navbarコードがどのように見えるかを知るために、自分のプロジェクトのnavbarコードで参照したthis codepenをチェックアウトすることができます。あなたのserver.jsで

Answer 1

私は、この問題を引き起こしている可能性されたもののことを発見しました2つのアプローチは、そのためにあります。HREFを使用して

• は、あなたの代わりに「A」の反応-ルータからの絶対パスではなく相対
• 使用リンクを使用する必要があります。

例アプローチ1：

<a className="navbar-brand" href={ 'http://www.absolutepath.com' + this.props.linkTo}>{this.props.text}</a> 

例アプローチ2：

import { Link } from 'react-router' 

<Link to={ this.props.linkTo }> 
    <span className="navbar-brand">{this.props.text}</span> 
</Link> 

Answer 2

、ルート/index.htmlがファイル（ファイル要求を無視して）へのすべてのルート要求をリダイレクト：あなたのナビゲーションバーのコンポーネント内に探し

app.use('*', function (req, res, next) { 
    const filename = path.join(compiler.outputPath, 'index.html') 
    compiler.outputFileSystem.readFile(filename, (err, result) => { 
    if (err) { 
     return next(err) 
    } 
    res.set('content-type', 'text/html') 
    res.send(result) 
    res.end() 
    }) 
})