Почему маршрутизация React не работает в компоненте?

Question

Я работаю над веб-приложением React с использованием маршрутизатора React. В моем файле приложения. js я импортировал заголовок и домашний компонент. В домашнем компоненте у меня есть 2 компонента, называемые Onlinebanks и Creditcard, которые я импортировал из online-банков. js и creditcard. js files.

Когда пользователь нажимает кнопки ссылки в home. js компонента, Компоненты Onlinebanks и Creditcard должны отображаться.

Вместо этого я получаю сообщение об ошибке Ошибка: не удалось выполнить инвариант: вам не следует использовать вне .

Почему это не работает?

ИНДЕКС. JS

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';


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

ПРИЛОЖЕНИЕ. JS

import React, { Component } from 'react';

import './App.css';
import Header from './components/header';
import Home from './components/home';

class Routes extends Component {

    constructor(props){
      super(props);

      this.state = {

      };

    }

    render(){

        return (
          <div className="wrapper">
              <Header/>
              <Home/>
          </div>
        );
    }

}

export default Routes;

ГЛАВНАЯ . JS

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

import Onlinebanks from './online-banks';
import Creditcard from './creditcard';


const Home = (props) => {


   return (
    <div className="section">
            <div className="main-page">

                <div className="tab-container">

                        <div className="tab-btns">
                        <Link to="/">
                            <div className="online-bank-btn">
                                Online pangad
                            </div>
                        </Link>
                        <Link to="/creditcard">       
                            <div className="creditcard-btn">
                                Krediitkaart
                            </div>
                        </Link>
                        </div>

                        <Switch>
                            <Route path="/" exact component={Onlinebanks}/>
                            <Route path="/creditcard" exact component={Creditcard}/>
                        </Switch>
                </div>
            </div>              
    </div>


   )
}


export default Home;

ОНЛАЙН-БАНКИ. JS

import React from 'react';


const Onlinebanks = (props) => {
   return (
    <div className="banks-container">


    <input type="button" value="Pay" className="pay-btn" id="online-banks-pay"></input>
    </div>
   )
}


export default Onlinebanks;

КРЕДИТНАЯ КАРТА. JS

import React from 'react';


const Creditcard = (props) => {
   return (
    <div className="Creditcard-container">


    <input type="button" value="Pay" className="pay-btn" id="creditcard-pay"></input>
    </div>
   )
}


export default Creditcard;

Answer 1

Я не вижу нигде в вашем коде, где вы импортировали BrowserRouter из реактив-маршрутизатор-дом, который должен обернуть все остальные компоненты, представленные вашим компом верхнего уровня onet (приложение. js), или полностью обернуть приложение составная часть. Итак, сначала import { BrowserRouter as Router } from "react-router-dom" в индексе. js, затем оберните компонент приложения с помощью Router следующим образом:

ReactDOM.render(<Router> <App />  </Router>,  document.getElementById("root"));

. В качестве альтернативы вы можете обернуть уставку повторной настройки в приложении. js с помощью Router следующим образом после импорта BrowserRouter. как маршрутизатор

return (
        <Router>
         <div className="wrapper">
          <Header/>
          <Home/>
         </div>
       </Router>
    );

Answer 2

вам нужно лучше понять, как работает response-router-dom.

посетите здесь для получения полного руководства по маршрутизации. response-router-dom

я обнаружил некоторые серьезные пропуски в вашем приложении. js file.

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

<Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/dashboard">
            <Dashboard />
          </Route>
        </Switch>

Я не вижу этот метод в вашем приложении. js.

Answer 3

<Router> является компонентом HO C, поэтому вам нужно использовать его на самом высоком возможном уровне. Было бы предложено создать отдельный Router компонент и использовать его в App.js файле выше div tag

<CustomRouter>
 <div className="wrapper">
              <Header/>
              <Home/>
 </div>
</CustomRouter>