Reactjs 路由器无法获取 /page答案

【问题标题】：Reactjs Router Can't GET /pageReactjs 路由器无法获取 /page
【发布时间】：2020-01-02 00:41:52
【问题描述】：

我在 reactjs 遇到了一个尴尬的问题。这是关于路由的。当路由到任何页面时，它真的很棒！唯一的问题，当我重新加载页面时，它会触发 Cannot GET /employee 这里的员工是我的页面名称！

我不明白为什么我会看到这个。

这是我的 index.js 文件：

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from 'react-router-dom'

import App from "../client/components/App";

import { Provider } from 'react-redux'

import { createStore } from 'redux'
import postReducer from '../client/postReducer'

const store = createStore(postReducer)


// if we don't subcribe, yet our crud operation will work
function onStateChange() {
  const state = store.getState();
}

store.subscribe(onStateChange)

ReactDOM.render((
  <BrowserRouter>
      <Provider store={store}>
        <App />
      </Provider>
  </BrowserRouter>
), document.getElementById('app'))

这是我的app.js 文件

import React, { Component } from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import Home from '../components/home';
import Contacts from '../components/contact';
import About from '../components/about';
import Employees from '../components/Employees';

class App extends Component {
  render() {
    return (
    <Router>
        <div className="container">
          <nav className="navbar navbar-expand-lg navbar-light bg-light">
          <ul className="navbar-nav mr-auto">
            <li><Link to={'/'} className="nav-link"> Home </Link></li>
            <li><Link to={'/employee'} className="nav-link">Employee</Link></li>
            <li><Link to={'/contact'} className="nav-link">Contact</Link></li>
            <li><Link to={'/about'} className="nav-link">About</Link></li>
          </ul>
          </nav>
          <hr />
          <Switch>
              <Route exact path='/' component={Home} />
              <Route path='/employee' component={Employees} />
              <Route path='/contact' component={Contacts} />
              <Route path='/about' component={About} />
          </Switch>
        </div>
      </Router>
    );
  }
}

export default App;

这是我的webpack

const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist'
  }
});

谁能帮我解决这个错误Cannot GET /employee？

【问题讨论】：

是只在生产上还是在开发上？听起来您的网络服务器未配置为将 404 重定向到 index.html，经典，但不应发生在 dev 上。
在生产中，它表现出另一种方式，也是错误的
你很可能需要在生产环境中配置你的 .htaccess 文件来处理反应路由器。检查此链接gist.github.com/joellongie/e6f4a3b5fa98c521782619e487aca15a
我的后端是 django

标签： reactjs react-router

【解决方案1】：

我相信这是与以下内容重复的：react routing and django url conflict

问题可能是您尚未配置要处理的 URL 在 React Router 中定义的路由。在你的 Django urls.py 您应该使用 catch all 将所有 URL 与您的索引匹配模板
urlpatterns += [
    # match the root
    url(r'^$', base_view),
    # match all other pages
    url(r'^(?:.*)/?$', base_view),
]
base_view 将是一个视图函数，它呈现一个模板包括您的捆绑应用。

然而，你不应该使用 django 来提供静态文件，它不是为它设计的，性能不会很好?。一个快速的选择是集成 django whitenoise，但最佳实践是使用像 nginx 这样的 Web 服务器，甚至更好的 CDN。您可以在github pages 上免费托管您的静态文件，例如 react bundle app，这也很好。

【讨论】：