Блог

У меня есть одна проблема, которую я не могу понять. Я полностью новичок в ReactJS, поэтому я надеюсь, что вы мне поможете. Я сделал навигацию с помощью маршрутизатора React, и это работает, но когда я начинаю отображать все остальные компоненты в App.js ничего не произошло. Когда я маршрутизирую через панель навигации, она отображается, но при прокрутке ничего не произошло.

Это моя App.js без рендеринга других компонентов, которые работают нормально , но когда я добавляю что-то подобное, это то же самое без прокрутки.

мой код :

 const App = () => {
          return (
            <div>
              <Router>
                <Topbar />

                <About />
                <Switch>
                  <Route exact path="/" component={Home} />
                  <Route path="/about" component={About} />
                  <Route path="/service" component={Service} />
                  <Route path="/portfolio" component={Portfolio} />
                  <Route path="/contact" component={Contact} />
               </Switch>
            </Router>
           </div>
    );
};

export default App;
 

Вам нужно использовать перенаправление

1/ import {Redirect} from 'react-router-dom';

2/ Измените свой домашний маршрут на <Route exact path="/home" component={Home} />

3/ Добавьте перенаправление (это должен быть последний маршрут)

 <Route exact path="/">
  <Redirect to="/home" />
</Route>
 

Пример :

 import React from 'react';
import {
  BrowserRouter as Router,
  Route,
  Switch,
  Redirect
} from 'react-router-dom';

import Home from './Home';
import About from './About';
import Service from './Service';
import Portfolio from './Portfolio';
import Contact from './Contact';

const App = () => {
  return (
    <Router>
      <Switch>
        <Route path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/service" component={Service} />
        <Route path="/portfolio" component={Portfolio} />
        <Route path="/contact" component={Contact} />

        {/* Redirect */}
        <Route exact path="/">
          <Redirect to="/home" />
        </Route>
      </Switch>
    </Router>
  );
};

export default App;
 

Если вы хотите проверить демо-версию : Stackblitz