标签: react-router-dom

我正在使用 React js 组件，并且想要通过访问某个 URL 来渲染某些内容，所以问题是当我单击链接时，它会更改 URL 但不会渲染组件，我必须刷新页面才能渲染（正如我所说的 URL）更改）我正在访问 URL，http://localhost/3000/product/32423432wew23URL 更改为此并刷新页面，它呈现此 id 的产品，但通过刷新页面。

应用程序.js

import "./App.css";

import { Provider } from "react-redux";
import store from './store';
import MainRoute from "./Route/MainRoute";
import {BrowserRouter as Router} from "react-router-dom"
function App() {
  
  return (
    <Router>
      <Provider store={store}>
        <MainRoute/>   
      </Provider>
    </Router>
  );
}

export default App;

MainRoute.js

import React,{useState,useEffect} from "react";
import  { Alert }  from "../Components/Alert";
import { BrowserRouter as Router, Switch, Route,Redirect } from "react-router-dom";
// import HomePage from "../Components/Pages/HomePage"; …

因此，我使用react-router-bootstrap 中的LinkContainer 组件来包装bootstrap 中的Nav.Link 组件。请参考下图以供参考。

// Snippet
import {LinkContainer} from "react-router-bootstrap";

// Snippet

              <LinkContainer to="/cart">
                <Nav.Link class="navlink">
                  <FaShoppingCart /> Cart
                </Nav.Link>
              </LinkContainer>

// Snippet

但我的代码出现此错误：[错误照片][1] [1]：https://i.stack.imgur.com/AF41y.png

顺便说一句，我正在使用 React v.17.0.2 和 React-Router-Bootstrap v.0.25.0

我想问是否有人可以提供帮助，或者我应该更改我的react-router-bootstrap 版本，甚至使用react-router-component 来代替。

先感谢您。

我正在使用react-router-dom并面临使用问题<Routes>：这是我的index.tsx文件：

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

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

这是我的 App.tsx 文件

import React from 'react';
import { RecoilRoot } from 'recoil';
import { BrowserRouter, BrowserRouter as Routes, Route } from 'react-router-dom';
import Loading from './sign/loading';
import SignIn from './sign/signIn';
import SignUp from './sign/signUp';
import SettingCare from './manage/settingCare';
import ManageCare from './manage/manageCare';
import AddCare from './manage/addCare';
import Main from './main/main';

function …

当我在两条不同的路线上使用相同的组件时遇到问题，我希望该组件被破坏并再次安装，但这种情况不会发生：

当我通过单击按钮更改/page1为/page2 时，控制台中的输出应该是：/page2

COMPONENT DISMOUNTED
COMPONENT MOUNTED

COMPONENT DISMOUNTED
COMPONENT MOUNTED

import {
  Routes,
  Route,
  BrowserRouter,
  Navigate
} from 'react-router-dom';

const App = () => {
  return (
    <BrowserRouter>
      {/* Routes */}
      <Routes>
        {/* Route 1 */}
        <Route path="/page1" element={<MyComponent someProp="value1" />} />
        {/* Route 2 */}
        <Route path="/page2" element={<MyComponent someProp="value2" />} />

        <Route path="/*" element={<Navigate to={{ pathname: '/page1' }} />} />
      </Routes>
    </BrowserRouter> …