Javascript 使用react路由器v4导航

我正在尝试构建一个应用程序，并学习如何作为前端框架进行反应。我最近被介绍到react路由器并开始学习v4。我很难创建一个简单的应用程序，它有3个页面-

Base

、

Page1

和

Page2

，所有这些页面都只显示导航栏和页面名称作为标题

我实现了这一点，并在本地服务器上运行。主页将加载，当我单击标题上的链接时，我将进入正确的页面。我的问题是，当我手动输入url时，我得到了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')
);

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;

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;

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;

我使用

npmstart

命令编译并运行代码，该命令取自packages.json文件中的start脚本。我使用

httpserver

运行前端服务器，该服务器允许我在页面之间进行路由

---

有人能解释一下为什么我可以通过导航栏而不是URL导航到其他页面吗？

http服务器不支持应用程序的路由。因此，当您输入
/page1
url时，您的
http服务器将尝试打开
page1.html
或
page1/index.html
文件。您的目录中不存在这样的文件，因此您收到一个错误

您可以创建一个简单的服务器，它总是在任何请求时发送index.html

服务器的最简单实现可以是：
var http=require（'http'），
fs=要求（'fs'）；
fs.readFile（'./index.html'，函数（err，html）{
如果（错误）{
犯错误；
}       
http.createServer（函数（请求、响应）{
writeHeader（200，{“内容类型”：“text/html”}）；
response.write（html）；
response.end（）；
}).听（8000）；
});可能重复的
import React from 'react';
import CreateReactClass from 'create-react-class';

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

export default Base;

{
  "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"
  }
}