简体   繁体   English

"反应路由器不起作用\/\/即使遵循文档"

[英]React router not working //Even after following the documentation

So i was trying react for first time, i followed the documentation and at router dom i got stuck When i use Switch is says "export 'Switch' (imported as 'Switch') was not found in 'react-router-dom'" So in short my router isn't working and i want a way to make it work, also it is the latest version of react as i just made this project yesterday所以我第一次尝试做出反应,我按照文档和路由器 dom 卡住了当我使用 Switch 时说“在 'react-router-dom' 中找不到导出'Switch'(导入为'Switch')”所以简而言之,我的路由器不工作,我想要一种方法让它工作,它也是最新版本的 react,因为我昨天刚做了这个项目

import logo from './logo.svg';
import './App.css';
import Navbar from './components/Navbar';
import Form from './components/Form';
import Sus from './components/Sus';
import React from "react";
import {
  BrowserRouter as Router,
  // Switch,
  Routes,
  Route,
  Link
} from "react-router-dom";

function App() {
  return (
    <Router>
    <div className="">
      <Navbar title="Sus" main="SusHome" about="SusAbout"/>
      <div className="container my-5">

      <Routes>
          <Route path="/" component={Form}/>
          <Route path="/sus" component={Sus} />
        </Routes>
      </div>
    </div>
    </Router>
  );
}

export default App;

To render your components you have to pass like this:要渲染您的组件,您必须像这样传递:

<Route path="/" element={<Form/>}/>
<Route path="/sus" element={<Sus/>} />

Upgrading React Router V5 to V6<\/strong>将 React 路由器 V5 升级到 V6<\/strong>

If you have ever used React Router you know that we need to wrap our routes into this <Switch><\/code> component that makes sure that only one of these routes is loaded at the same time, instead of all matching routes.如果您曾经使用过 React Router,您就会知道我们需要将路由包装到这个<Switch><\/code>组件中,以确保同时加载这些路由中的一个,而不是所有匹配的路由。 Something like this<\/em>像这样的东西<\/em>

export function App() {
  return (
    <div>
      <Switch>
        <Route path="/">
          <Home />
        </Route>
      </Switch>
    </div>
  )
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 构建应用程序后反应路由器不起作用 - React router not working after building the app 页面刷新后,React Router无法正常工作 - React Router not working after the page refresh 即使尝试使用 Routes 和 Router,路由也无法正常工作 - Routes not working in react even when trying to use Routes and Router 即使遵循 react-navigation 文档,react-navigation 也无法在屏幕之间导航 - react-navigation can't navigate between screens even after following react-navigation docs 即使将 state 值存储在 localstorage [React/React-router] 中,它的值也会丢失 - state value getting lost even after storing it in localstorage [React/React-router] 即使在路由之后,组件也不会呈现 | 反应 JS | 反应路由器 v6 - Component is not rendering even after routing | React JS | React Router v6 react-router-dom BrowserRouter在构建后无法正常工作 - react-router-dom BrowserRouter not working after build 页面重定向后,activeClassName 在反应路由器 NavLink 中不起作用 - activeClassName not working in react router NavLink after page redirect 使用 saga 添加“createBrowserHistory”后,React 路由器停止工作 - React router stopped working after adding "createBrowserHistory" with saga 反应路由器不工作 - 没有错误 - React router not working - no errors
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM