Wie funktioniert Routing in React.js

Question

Ich arbeite an der folgenden react project, und versuche, die relativen Links in der Navbar ordnungsgemäß zu funktionieren. wenn ich auf jedoch auf Über mich ich die folgende Antwort,

Cannot GET /about 

Der Code, den ich mit sieht wie folgt aus arbeite,

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; 

Um eine Vorstellung davon zu bekommen, wie der Navbar-Code aussieht, können Sie sich auch die this codepen-Datei ansehen, auf die ich in meinem Projekt für den Navbar-Code verwiesen habe.

Answer 1

in Ihrem Navbar Komponente der Suche fand ich ein Ding, die dieses Problem verursacht werden können, gibt es zwei Ansatz dafür:

• href verwenden Sie absoluten Pfad verwendet werden soll, nicht relativ
• verwenden Link von reagieren-Router statt 'a':

Beispiel 1 Ansatz:

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

Beispiel 2 Ansatz:

import { Link } from 'react-router' 

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

Answer 2

In Ihren server.js, leiten alle Routen-Anfragen an die Wurzel /index.html Datei (ohne Berücksichtigung von Dateianforderungen):

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