Javascript 如何让路由在React.js中工作

我正在进行以下工作，并试图使导航栏中的相对链接正常工作。然而，当我点击“关于我”时，我得到了以下回应：

Cannot GET /about 

我正在使用的代码如下所示

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;

//此组件处理每个页面上使用的应用程序模板。
从“React”导入React，{PropTypes}；
从“./common/Header”导入标题；
从“./common/NavBar”导入导航栏；
从“反应路由器”导入路由器；
从“反应路由器”导入{Link，IndexLink}；
var navbar={}；
navbar.brand={linkTo:“http://chrisrjones.com，文本：“chrisrjones.com”}；
navbar.links=[
//关于
{链接到：“/about”，文本：“about Me”}，
{链接到：“#”，文本：“联系人”}，
{下拉列表：true，文本：“贡献”，链接：[
{链接到：“#”，文本：“注册”}，
{链接到：“#”，文本：“登录”}
]}
];
类应用程序扩展了React.Component{
render（）{
返回(
{this.props.children}
);
}
}
App.propTypes={
子项：PropTypes.object.isRequired
};
导出默认应用程序；

---

此外，要了解导航条码的外观，您可以查看我在项目中引用的导航条码。

在

server.js

中，将所有路由请求重定向到root/index.html文件（忽略文件请求）：

---

查看您的Navbar组件内部，我发现了可能导致此问题的原因之一，有两种方法：

• 使用href时，应该使用绝对路径，而不是相对路径
• 使用react路由器的链接而不是“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>

从'react router'导入{Link}
{this.props.text}

import { Link } from 'react-router'

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