Маршрутизатор React не загружает компонент на маршруте

#reactjs

Вопрос:

Я пытаюсь перейти по ссылке /login , когда я нажимаю на фактическую ссылку, я вижу изменение URL-адреса в браузере, но Login компонент не загружен:

 // App.tsx

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

import Header from './components/Header/Header';
import Login from './components/Login/Login';

const App = () => {
  return (
    <React.Fragment>
      <Header />
      <Router>
        <Route path="/login" exact component={Login} />
      </Router>
    </React.Fragment>
  );
};

export default App;

 // Header.tsx

import React from 'react';
import {BrowserRouter, Link} from 'react-router-dom';

const Header = () => {
  return (
    <BrowserRouter>
      <Link to="/login">login</Link>
    </BrowserRouter>
  );
};

export default Header;

И фактический компонент входа в систему:

 // Login.tsx

import React from 'react';
// import {useHistory} from 'react-router-dom';

const Login = () => {
  console.log('login component opened');
  return (
    <div>
      Login
    </div>
  );
};

export default Login;

Когда я нажимаю ссылку в header компоненте, ко мне переходят http://localhost:8080/login , но компонент не загружается. Кроме того, если я обновлю эту страницу http://localhost:8080/login , я получу сообщение:

Не удается ПОЛУЧИТЬ /войти в систему

Ответ №1:

Во-первых, Link компонент должен быть внутри BrowserRouter

 const App = () => {
  return (
    <React.Fragment>
      <Router>
        <Header />
        <Route path="/login" exact component={Login} />
      </Router>
    </React.Fragment>
  );
};

Кроме того, вам не нужно BrowserRouter оборачивать Link компонент:

 import React from 'react';
import {BrowserRouter, Link} from 'react-router-dom';

const Header = () => {
  return (
      <Link to="/login">login</Link>
  );
};

export default Header;

1. Спасибо, чем я неправильно понял ошибку. Uncaught Error: Invariant failed: You should not use <Link> outside a <Router> думал, что мне нужно поместить link внутренний компонент в маршрутизатор, но это компонент, который должен быть в маршрутизаторе.

2. Да, я тоже нашел вашу проблему из-за этой ошибки.

Ответ №2:

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

 const Header = () => {
  return (
    <BrowserRouter>
      <Link to="/login">login</Link>
      <Switch>
          <Route exact path="/login">
              <Login />
          </Route>
      </Switch>
    </BrowserRouter>
  );
};

Ответ №3:

Внутри App.tsx ваш импорт не должен выглядеть так:

 import Login from './components/Login/login';

Вместо этого все должно быть так:

 import Login from './components/Login/Login';

Вы использовали неправильное имя файла для компонента входа в систему. Первая буква должна быть прописной.