使用react-router v4导航

Question

我正在尝试构建一个应用程序，并学习作为前端框架做出反应。 最近向我介绍了React-Router，并开始接触v4。 我不得不创建一个简单的应用程序，有3页和巨大的困难- Base ， Page1和Page2都只是显示了导航栏和网页作为一个头的名称。

我实现了这一点，并且可以在我的本地服务器上工作。 加载主页，然后单击标题上的链接，将带到正确的页面。 我的问题是，当我手动输入网址时，我收到404响应，但我不明白为什么。

到目前为止，这是我的工作。

Main.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import Routes from './Routes.jsx';

ReactDOM.render((
        <BrowserRouter>
            <Routes />
        </BrowserRouter>
    ), document.getElementById('main')
);

Routes.jsx

import React from 'react';
import { Route } from 'react-router-dom';
import Pages from './components/Pages.jsx';
import Navigation from './components/Header.jsx';

const Routes = () => (
    <div>
        <Navigation />
        <Pages />
    </div>
);

export default Routes;

Header.jsx

import React from 'react';
import { NavLink } from 'react-router-dom';
import CreateReactClass from 'create-react-class';

const Navigation = () => (
  <nav>
    <ul>
      <li><NavLink to='/'>Home</NavLink></li>
      <li><NavLink to='/page1'>Page1</NavLink></li>
      <li><NavLink to='/page2'>Page2</NavLink></li>
    </ul>
  </nav>
);

export default Navigation;

Pages.jsx

import React from 'react';
import CreateReactClass from 'create-react-class';
import { Route, Switch } from 'react-router-dom';
import Base from './Base.jsx';
import Page1 from './Page1.jsx';
import Page2 from './Page2.jsx';

const Pages = () => (
    <Switch>
        <Route exact path="/" component={Base} />
        <Route exact path="/page1" component={Page1} />
        <Route exact path="/page2" component={Page2} />
    </Switch>
);

export default Pages;

Base.jsx（Page1.jsx和Page2.jsx相同，但更改了h1值）

import React from 'react';
import CreateReactClass from 'create-react-class';

const Base = CreateReactClass({
    render: function(){
        return(
            <div>
                <h1>Base</h1>
            </div>
        );
    }
});

export default Base;

的package.json

{
  "name": "react-skeleton",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "watchify src/main.jsx -v -t [ babelify --presets [ react env ] ] -o public/js/main.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/ddold/react-skeleton.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/ddold/react-skeleton/issues"
  },
  "homepage": "https://github.com/ddold/react-skeleton#readme",
  "dependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "babelify": "^8.0.0",
    "create-react-class": "^15.6.3",
    "history": "^4.7.2",
    "http-server": "^0.11.1",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-router": "^4.1.1",
    "react-router-dom": "^4.2.2",
    "watchify": "^3.11.0",
    "webpack": "^4.1.1"
  }
}

我使用npm start命令编译并运行代码，该命令取自packages.json文件中的启动脚本。 我使用http-server运行前端服务器，该服务器允许我在页面之间进行路由

任何人都无法阐明为什么我可以通过导航栏而不是通过URL导航到其他页面吗？

Answer 1

http-server不支持您的React应用程序的路由。 因此，当您输入/page1 url时，您的http-server尝试打开page1.html或page1/index.html文件。 该文件在您的目录中不存在，因此您会收到错误消息。

您可以创建简单的服务器，该服务器始终根据任何请求发送index.html。

服务器的最简单实现可以是：

 var http = require('http'), fs = require('fs'); fs.readFile('./index.html', function (err, html) { if (err) { throw err; } http.createServer(function(request, response) { response.writeHeader(200, {"Content-Type": "text/html"}); response.write(html); response.end(); }).listen(8000); }); 

或者，您可以设置webpack开发服务器https://webpack.js.org/configuration/dev-server/