路由无法使用 react-router-dom-v6.4.2 [重复]

Question

介绍

我创建了一个反应启动器应用程序

问题

我在/src/pages 中创建了一个名为AddCoupon、Addvertical、Addmetadata 的组件。现在我在/src 中创建了一个文件Routes.js。

路由.js

import React from 'react';
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link
} from "react-router-dom";
import AddCoupon from './pages/addCoupon';
import AddMetadata from './pages/addMetadata';
import AddVertical from './pages/addVertical';
import Login from './pages/login';


const Routes = () => {
    return (
        <>
            <Router>
                <Switch>
                    <Route path="/addcoupon">
                        <AddCoupon />
                    </Route>
                    <Route path="/addmetadata">
                        <AddMetadata />
                    </Route>
                    <Route path='/addvertical'>
                        <AddVertical />
                    </Route>
                    <Route path="/">
                        <Login />
                    </Route>
                </Switch>
            </Router>
        </>
    )
}

export default Routes

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter as Router } from 'react-router-dom'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Router >
      <App />
    </Router>
  </React.StrictMode>
);


reportWebVitals();

我想要的是？

所以基本上我想要的是，当我输入 http:localhost:3000/addcoupon 时，它应该呈现 AddCoupon Component 并且对于其他 2 个组件也是如此，但现在它什么也没显示。

我不想使用任何导航栏。我想要的只是当我点击 Route.js 中提到的端点时，它应该呈现该组件。

Answer 1

与早期版本相比，Router 6 使用不同的语法。请查看文档： https://reactrouter.com/en/v6.3.0/getting-started/overview

对于您的特定情况，您需要删除开关，并将元素传递给路由，并将所有 Route 元素包装在 Routes 元素中，如下所示：

const Routes = () => {
    return (
        <>
            <Routes>
                <Route path="/addcoupon" element={<AddCoupon />}/>
                <Route path="/addmetadata" element={<AddMetadata />}/>
                <Route path='/addvertical' element={<AddVertical />}/>
                <Route path="/" element={<Login />}/>
            </Routes>
        </>
    )
}

为了使路由工作，您还需要将App 元素包装在Router 元素中，如下所示：

import ReactDOM from 'react-dom'
import { BrowserRouter as Router } from 'react-router-dom'
import App from './App'
import './styles/index.scss'

ReactDOM.render(
   <Router>
      <App />
   </Router>,
   document.getElementById('root')
)

最后一步，在 App 元素内或任何你想使用它的地方渲染 Routes：

const App = () => {
   return <Routes/>
}