javascript - 使用 React-router v4 进行导航

Question

我正在尝试构建一个应用程序并学习 React 作为前端框架。我最近接触到了 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/