如何在React.js中获取路由工作

我正在研究以下react project，并试图让导航栏中的相关链接正常工作。然而，当我点击关于我我得到如下回应，如何在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;

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

来源

2017-02-13 Chris

寻找你的导航栏组件里面，我发现一个东西，是可能会导致此问题，有两种方法为：

使用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>

来源

2017-02-13 17:29:19 Robsonsjre

在你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() 
    }) 
})

来源

2017-02-13 17:13:11

如何在React.js中获取路由工作

回答

相关问题