Question

我正在处理以下react project，并尝试让导航栏中的相对链接正常工作。但是，当我点击关于我时，我得到以下回复，

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;

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

Answer 1

查看您的Navbar组件，我发现可能导致此问题的一件事，有两种方法：

使用href，您应该使用绝对路径，而不是相对路径
使用来自react-router而不是'a'的链接：

示例方法1：

devDependencies

示例方法2：

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

Answer 2

在server.js中，将所有路由请求重定向到根/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()
  })
})

如何在React.js中使用路由

2 个答案: