在 React.js 中定位 url 时出现错误 404答案

【问题标题】：Error 404 while targeting url in React.js在 React.js 中定位 url 时出现错误 404
【发布时间】：2020-08-15 16:49:42
【问题描述】：

例如，如果我打开此链接 https://cubeacloud.com/ ，它将很容易打开但如果我针对这个特定链接https://cubeacloud.com/contact 它会显示错误 404（在私人标签中打开第二个链接）我尝试了路由中的所有东西

路由代码如下

import react from 'react';

import { Switch, Route, Router, BrowserRouterProps } from 'react-router-dom';

import LandingPage from './landingpage';
import AboutMe from './aboutme';
import Contact from './contact';
//projects
import Projects from './projects/projects';
import Graphics from './projects/graphics';
import Content from './projects/contant';
import Nav from '../navbar';
// import Resume from './resume';

//blogs
import Blogs from './blogs/blog';
import CryptoBlogs from './blogs/crypto';
import GamesBlogs from './blogs/games';
import ItBlogs from './blogs/it'
import EducationBlogs from './blogs//education'

//education
import Education from './education/education';
import Books from './education/books';
import Videos from './education/videos';
import Quiz from './education/quiz'
import Courses from './education/courses'
 
const Main = () => (
  
  <Switch>
    <Route exact path={process.env.PUBLIC_URL + '/'} component={LandingPage} />
    <Route path="/aboutme" component={AboutMe} />
    <Route path="/contact" component={Contact} />
      {/* All Projects */}
    <Route path="/projects/projects" component={Projects} />
    <Route path="/projects/graphics" component={Graphics} />
    <Route path="/projects/content" component={Content} />
  {/* <Route path="/blog" component={Blogs} /> */}
   {/* All Education */}
   <Route path="/education/education" component={Education} />
  <Route path="/education/books" component={Books} />
  <Route path="/education/videos" component={Videos} />
  <Route path="/education/courses" component={Courses} />
  <Route path="/education/quiz" component={Quiz} />

      {/* All Blogs */}
      <Route path="/blogs/blog" component={Blogs} />
      <Route path="/blogs/crypto" component={CryptoBlogs} />
      <Route path="/blogs/education" component={EducationBlogs} />
      <Route path="/blogs/it" component={ItBlogs} />
      <Route path="/blogs/games" component={GamesBlogs} />
  </Switch>
)

export default Main;

【问题讨论】：

请不要对你寻求帮助的人大喊大叫
这能回答你的问题吗？ React-router urls don't work when refreshing or writing manually

标签： javascript reactjs url routes react-router

【解决方案1】：

你做得对，你也把MainReact功能组件组织得很好，这里只有一件事你必须使用BrowserRouter。

请用<BrowserRouter></BrowserRouter/>包裹你的<Switch>...</Switch>

import { BrowserRouter } from 'react-router-dom';


const Main = () => (
  <BrowserRouter>
    <Switch>
      //your custom routes
    <Route> // not found route(404)
      <p>Not Found</p>
    </Route>
    </Switch>
  </BrowserRouter>
);

export default Main;

【讨论】：

它不起作用:(
@HAHAHAHA，请把你的浏览器控制台输出截图。
@HAHAHAHA，做一件事，把NotFoundRoute加到你的路由器上，看看它是否工作，如果没有，说明你的路由器有问题，工作正常。但是，如果 Not Found Route 也无法正常工作，则意味着问题出在主机上。因为我已经用 Not found Route 更新了我的答案。

【解决方案2】：

enter image description here

加载资源失败：服务器响应状态为404()

WEB 在本地主机和本地网络上运行良好，

【讨论】：