如何解决虽然我使用.htaccess,但是我的react应用程序的链接不起作用
在将.htaccess文件放在服务器上之前,我的React App与Router的链接不起作用。当我单击一个链接时,总是出现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'));
解决方法
我想我只是弄清楚出了什么问题。 .htaccess在构建文件夹中不存在。您必须将.htaccess手动上传到index.html所在的根文件夹。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。