为啥 React 路由在组件中不起作用？

Posted 2023-02-21

【中文标题】为啥 React 路由在组件中不起作用？

【英文标题】：Why React routing not working in component?为什么 React 路由在组件中不起作用？

【发布时间】：2020-05-21 22:12:22

【问题描述】：

我正在使用 React 路由器开发一个 React Web 应用程序。 在我的 App.js 文件中，我导入了 header 和 home 组件。 在 home 组件中，我有 2 个名为 Onlinebanks 和 Creditcard 的组件，它们是从 online-banks.js 和 creditcard.js 文件中导入的。

当用户点击 home.js 组件中的链接按钮时，应呈现 Onlinebanks 和 Creditcard 组件。

相反，我收到一个错误，称为错误：不变式失败：您不应该在 之外使用 。

为什么它不起作用？

INDEX.JS

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


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

APP.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;

HOME.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;

ONLINE-BANKS.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;

CREDITCARD.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;

【问题讨论】：

错误清楚地表明<Link> 将无法工作，直到您设置您的<Router>。您可能想关注他们的quick start guide 以更熟悉该库。同时，如果您只是想链接到不同的页面，只需使用原生 html <a> 标签。

【参考方案1】：

您需要更好地了解 react-router-dom 的工作原理。

访问此处获取完整的路由指南react-router-dom

我在您的 app.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>

我在你的 app.js 中没有看到这个方法。

【参考方案2】：

我在您的代码中没有看到您从 react-router-dom 导入 BrowserRouter 的任何地方，它应该包装由您的***组件 (app.js) 呈现的所有其他组件或完全包装应用程序组件。所以，首先在 index.js 中 import BrowserRouter as Router from "react-router-dom"，然后用 Router 包装 App 组件如下

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

或者，您可以在将 BrowserRouter 导入为 Router 后，将 retun 语句用 Router 包装在 app.js 中，如下所示

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

【参考方案3】：

<Router> 是一个 HOC 组件，因此您需要尽可能在最顶层使用它。建议创建一个单独的Router 组件并在div 标签上方的App.js 文件中使用它

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