三行代码  ›  专栏  ›  技术社区  ›  Manjay

没有显示任何内容

  •  1
  • Manjay  · 技术社区  · 1 月前

    单击时应返回一条简单消息,但没有人显示。

    Index.JS代码

    import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import App from './App';
    import registerServiceWorker from './registerServiceWorker';
    import { BrowserRouter } from 'react-router-dom';
    
    ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>
    , document.getElementById('root'));
    registerServiceWorker();
    

    App.JS上的代码

    import React, { Component } from "react";
    import NavBar from "./components/navbar";
    import { Route, Routes } from 'react-router-dom';
    import Products from "./components/products";
    import "./App.css";
    
    class App extends Component {
      render() {
        return (
          <div>
            <NavBar />
            <Routes>
              <Route path= "/products" component={Products}></Route>
            </Routes>
          </div>
        );
      }
    }
    
    export default App;
    

    nav.jsx

    import React from "react";
    
    const NavBar = () => {
      return (
        <ul>
          <li>
            <a href="/">Home</a>
          </li>
          <li>
            <a href="/products">Products</a>
          </li>
          <li>
            <a href="/posts/2018/06">Posts</a>
          </li>
          <li>
            <a href="/admin">Admin</a>
          </li>
        </ul>
      );
    };
    
    export default NavBar;
    

    products.jsx代码

    const Product = () => {
      return <h1>Products</h1>;
    };
    
    export default Product;
    

    我基本上不知道我错过了什么。

    2 回复  |  直到 1 月前
        1
  •  2
  •   Drew Reese    1 月前

    在里面 react-router-dom v6的 Route 组件在屏幕上渲染其组件 element 道具 .

    <Route path="/products" element={<Products />} />
    

    如果您仍在使用v5,并且刚刚混淆了文档,那么在v5中使用 Switch 反而( Routes 取代 在v6中 )并使用 component 就像你一样。

    <Switch>
      <Route path="/products" component={Products} />
    </Switch>
    
        2
  •  1
  •   vahid ghadiri    1 月前

    如果您使用的是react router dom 6,则必须在每个路由内部使用元素而不是组件,如下所示:

            <Routes>
              <Route path= "/products" element={<Products/>}></Route>
            </Routes>
    

    如果您使用的是react router dom 5,则必须使用交换机而不是路由,如下所示:

            <Switch>
              <Route path= "/products" component={Products}></Route>
            </Switch>