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

Question

例如，如果我打开此链接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;

Answer 1

您做对了，也已经很好地构造了Main React功能组件，这里您只需要使用BrowserRouter就可以了。

[请用<Switch>...</Switch>包裹您的<BrowserRouter></BrowserRouter/>

---

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


const Main = () => (
  <BrowserRouter>
    <Switch>
      //your custom routes
    </Switch>
  </BrowserRouter>
);
export default Main;