时间戳

首页 > 解决方案 > 为什么反应路由器不工作。当我改变路径？

reactjs - 为什么反应路由器不工作。当我改变路径？

问题描述

反应路由路径不起作用
它仅在所有 URL 中显示产品组件

我已经灌输了 react-router-dom，并将 BrowserRouter 导入为 Router、Switch、Route、Link

问题是什么？我想不明白。

import React from 'react';
import Navbar from './component/Navbar/Navbar';
import Product from './component/Product/Product';
import {BrowserRouter as Router,Switch,Route,Link} from "react-router-dom";
import UpComing from './component/UpComing/UpComing';
import NotFound from './component/NotFound/NotFound';
import OrderReview from './component/OrderReview/OrderReview';

function App() {
  return (
    <div className="App">
      <Navbar></Navbar>
      <Router>
        <Switch>
          <Route to="/product">
            <Product></Product>
          </Route>
          <Route to="/OrderReview">
            <OrderReview></OrderReview>
          </Route>
          <Route exact to="/">
            <Product></Product>
          </Route>
          <Route to="*">
            <NotFound></NotFound>
          </Route>
        </Switch>
      </Router>
    </div>
  );
}

export default App;

标签： reactjsrouterreact-router-domreact-dom

解决方案

您应该使用path而不是to在您的路线上。to用于Link组件。我已经创建了您在代码沙箱上工作的代码的最小表示

https://codesandbox.io/embed/react-router-playground-g0uzc?fontsize=14&hidenavigation=1&theme=dark

推荐阅读