Question

我正在尝试构建一个应用程序并学习作为前端框架的反应。我最近被介绍了反应路由器和掌握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＆amp; 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不支持您的反应应用程序的路由。因此，当您输入/page1网址时，您的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 dev服务器https://webpack.js.org/configuration/dev-server/

使用react-router v4进行导航

1 个答案: