.htaccess - 虽然我使用 .htaccess，但我的反应应用程序的链接不起作用

问题描述

在我将下面的 .htaccess 文件放在服务器上之前，我的 React 应用程序与路由器的链接不起作用。当我点击一个链接时，我总是得到 404 not found 错误。

尽管我将 .htacces 文件放入 index.js 所在的 src 文件夹中，但链接不起作用。我不再收到 404 错误，但内容没有改变。这可能是 React.Fragment 的问题吗？

.htacces 文件：

<IfModule mod_rewrite.c>

  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]

</IfModule>

index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import { BrowserRouter as Router, Route, Switch} from 'react-router-dom';
import { Home } from './components/Home';
import { About } from './components/About';
import { Contact } from './components/Contact';
import { NoMatch } from './components/NoMatch';
import { Impressum } from './components/Impressum';
import { Datenschutzerklaerung } from './components/Datenschutzerklaerung';
import { Layout } from './components/Layout';
import { Jumbotron } from './components/Jumbotron';
import Footer from './components/Footer';
import './fontawesome';
import { Navbar, Nav } from 'react-bootstrap';
import { withRouter } from 'react-router';
import logo from './assets/tjm_logo.svg';

const Header = props => {
  const { location } = props;
  return (
    <Navbar collapseOnSelect expand="lg" variant="dark" className="navbar-bgcolor">
      <Navbar.Brand href="/">
      <img
        src={logo}
        width="40"
        height="40"
        className="d-inline-block align-top"
        alt="Torben Jan Müller logo"
      />
    </Navbar.Brand>
      <Navbar.Toggle aria-controls="responsive-navbar-nav" />
      <Navbar.Collapse id="responsive-navbar-nav">
      <Nav activeKey={location.pathname} className="mr-auto">
          <Nav.Link href="/">Home</Nav.Link>
          <Nav.Link href="/about">About</Nav.Link>
          <Nav.Link href="/contact">Contact</Nav.Link>
      </Nav>
      <Nav activeKey={location.pathname}>
          <Nav.Link href="/impressum">Impressum</Nav.Link>
          <Nav.Link href="/datenschutzerklaerung">Datenschutzerklärung</Nav.Link>
      </Nav>
      </Navbar.Collapse>
  </Navbar>
  );
};
const HeaderWithRouter = withRouter(Header);

class MyHeader extends React.Component {

  render() {
    return (
      <React.Fragment>
        <Router>
        <HeaderWithRouter />
        <Jumbotron />
          <Switch>
            <Route exact path="/" component={Home} />
            <Layout>
              <Route path="/about" component={About} />
              <Route path="/contact" component={Contact} />
              <Route path="/impressum" component={Impressum} />
              <Route path="/datenschutzerklaerung" component={Datenschutzerklaerung} />
            </Layout>
            <Route component={NoMatch} />
          </Switch>
        </Router>
        <Footer />
      </React.Fragment>
    );
  }
}

ReactDOM.render(<MyHeader />, document.getElementById('root'));

标签： .htaccessreact-router

.htaccess - 虽然我使用 .htaccess，但我的反应应用程序的链接不起作用

问题描述

解决方案

推荐阅读