Блог

Главная - Вопросы по программированию - Маршруты в React

Маршруты в React

#reactjs

Вопрос:

Я пытаюсь создать портфель в react. Когда я отображаю панель навигации, я могу щелкнуть по ссылкам, и URL-адрес говорит, что я иду туда, куда мне нужно, но я продолжаю получать белую страницу / // app.js файл

 import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./components/Home";
import About from "./components/About";
import SinglePost from "./components/SinglePost";
import Post from "./components/Post";
import Project from "./components/Project";
import NavBar from "./components/NavBar"

function App() {
  return (
    <BrowserRouter>
    <NavBar/>
      <Routes>
        <Route component={Home} path ="/" exact />
        <Route component={About} path ="/about"/>
        <Route component={SinglePost} path= "/post/:slug"/>
        <Route component={Post} path = "/post"/>
        <Route component={Project} path = "/project"/>
      </Routes>
    </BrowserRouter>
  );
}


export default App;

// the About.js файл

 import React from "react"

export default function About(){
    return <h1>About Page!</h1>
}

Комментарии:

1. Вам нужно создать работоспособный пример вашего кода в codesandbox.io а затем точно опишите, что вы сделали и что вам нужно, если вам нужна помощь

Ответ №1:

Попробуйте изменить на HashRouter , поскольку он более стабилен в браузерах, особенно в старых.

Ответ №2:

Вы можете попытаться обернуть свои маршруты в Swicth

 import { Route, Switch} from "react-router-dom";
     <BrowserRouter>
        <NavBar/>
        <Switch>
          
            <Route component={Home} path ="/" exact />
            <Route component={About} path ="/about"/>
            <Route component={SinglePost} path= "/post/:slug"/>
            <Route component={Post} path = "/post"/>
            <Route component={Project} path = "/project"/>
        
          </Switch>
        </BrowserRouter>
Метки: