Блог

Привет реализован react-router очень простым способом.

App.js

 import React from 'react';
import './App.css';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';

import About from './pages/About';
import Home from './pages/Home';

function App() {
  return (
    <Router>
      <div className='App'>
        <Link to='/about'>About</Link>
        <Link to='/home'>Home</Link>

        <Switch>
          <Route to='/about' exact component={About}></Route>
          <Route to='/home' exact component={Home}></Route>
        </Switch>
      </div>
    </Router>
  );
}

export default App;
  

index.js

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

Мне интересно, почему эта базовая настройка не работает?

Я использую версию react-router-doc 5.2.0

Похоже, вы передали неправильную поддержку компоненту маршрута.

Попробуйте изменить

 <Route to='/about' exact component={About}></Route>
  

Для

 <Route path='/about' exact component={About}></Route>
  

Попробуйте это

 <Route exact path="/about" component={About} />
  

и измените это утверждение

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

Для

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