为什么反应路由不在组件中工作？

Question

我正在使用React路由器开发React web应用程序。在我的应用程序中。我已经导入了js文件头和主组件。在home组件中，我有两个组件，分别称为在线银行和信用卡，它们是我从在线银行导入的。js和信用卡。js文件。

当用户单击主页中的链接按钮时。js组件、在线银行和信用卡组件应呈现。

相反，我得到了一个名为error:Invariant failed的错误：您不应该使用

为什么它不起作用？

索引. 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

您需要更好地了解react路由器dom的工作原理。

访问此处获取完整的路由指南

我在你的应用程序中发现了一些重大遗漏。js文件。

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 2

js prettyprint-override"><CustomRouter>
 <div className="wrapper">
              <Header/>
              <Home/>
 </div>
</CustomRouter>

Answer 3

我在代码中没有看到从react router dom导入BrowserRouter的地方，它应该包装顶级组件（app.js）呈现的所有其他组件，或者完全包装应用组件。因此，首先从索引中的“react Router dom”导入{BrowserRouter as Router}。js，然后用路由器包装应用程序组件，如下所示

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

或者，您可以在应用程序中包装retun语句。将BrowserRouter作为路由器导入后，js与路由器的关系如下

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