reactjs 我如何在我的react网站上转到不同的路径而不出现“无法获取/路径”?

pkwftd7m  于 2022-12-22  发布在  React
关注(0)|答案(2)|浏览(100)

我有一个React网站在这里:www.assertivesolutions.ca。在该网站上,您可以单击标题中的“关于我们”链接,然后转到“关于我们”部分,在该部分中,您将找到“阅读更多信息”按钮。您可以单击该按钮,然后转到www.assertivesolutions.ca/services的“服务”页面。
所有这一切工作正常,除了当你输入“www.assertivesolutions.ca/services“直接在网址。然后你得到一个Cannot GET /services消息。这就是我需要帮助。我希望能够进入服务页面输入它到网址。
我的index.js文件非常简单:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

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

serviceWorker.unregister();

App.js文件如下所示:

import React, { Component } from 'react';
import './App.scss';
import './Home.scss';
import Header from './Header/Header';
import Banner from './Banner/Banner';
import Welcome from './Welcome/Welcome';
import MainFocus from './MainFocus/MainFocus';
import WhatWeDo from './WhatWeDo/WhatWeDo';
import OurBlog from './OurBlog/OurBlog';
import OurClients from './OurClients/OurClients';
import ContactUs from './ContactUs/ContactUs';
import Footer from './Footer/Footer';
import smoothscroll from 'smoothscroll-polyfill';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Blog from './Blog/blog';
import OurServices from './OurServices/OurServices';
import SideMenu from './SideMenu/SideMenu';

class App extends Component {

  render() {

    smoothscroll.polyfill();

    return (
      <Router>
        <Switch>
          <Route path="/" exact>
            <div className="app-master-container">
              <SideMenu pageWrapId={'page-wrap'} outerContainerId={'outer-container'} />
              <div className="header"><Header /></div>
              <Banner />
              <Welcome />
              <MainFocus />
              <WhatWeDo />
              <OurBlog />
              <OurClients />
              <ContactUs />
              <Footer />
            </div>
          </Route>
          <Route path="/blog">
            <Blog/>
          </Route>
          <Route path="/services">
            <OurServices/>
          </Route>
        </Switch>
      </Router>
    );
  }
}

export default App;

我不知道还有什么可以给你看,因为我不知道什么会影响这样的路由。如果你需要更多的信息,请问,我会尽我所能张贴它。
谢啦,谢啦

oyt4ldly

oyt4ldly1#

试试这个

<Route exact path="/blog">
        <Blog/>
      </Route>
      <Route exact path="/services">
        <OurServices/>
      </Route>

因为我认为直接输入时会显示在<Route path="/" exact>

nhaq1z21

nhaq1z212#

您需要为SPA编写重定向规则(要求所有请求返回index.html)
示例:如果您部署在Netlify上,则需要在public文件夹中创建一个_redirects文件,其内容如下:

/*   /index.html   200

相关问题