我是 react.JS 路由的新手，但是我一直在掙扎，因為簡單的 products.jsx 在我點擊時應該回傳一條簡單的訊息，但沒有人顯示。
索引.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;
導航.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;
我基本上不知道我錯過了什么。
uj5u.com熱心網友回復：
在react-router-domv6 中，Route組件將它們在elementprop上的組件渲染為 JSX。
<Route path="/products" element={<Products />} />
如果您仍在使用 v5 并且剛剛混淆了檔案，那么在 v5 中使用Switch代替（在 v6 中Routes替換Switch）并按component原樣使用prop。
<Switch>
<Route path="/products" component={Products} />
</Switch>
uj5u.com熱心網友回復：
如果您使用的是 react-router-dom 6，則必須在每個路由中使用元素而不是組件，如下所示：
<Routes>
<Route path= "/products" element={<Products/>}></Route>
</Routes>
如果您使用的是 react-router-dom 5，則必須使用 Switch 而不是 Routes，如下所示：
<Switch>
<Route path= "/products" component={Products}></Route>
</Switch>
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/369860.html