React Routes 不工作 React Router dom答案

【问题标题】：React Routes is not working React Router domReact Routes 不工作 React Router dom
【发布时间】：2023-01-09 16:09:52
【问题描述】：

路线不工作我是反应的初学者。当我在浏览器上键入网址时，文本不显示。到目前为止我尝试了什么，我附上了下面的内容。我在页面文件夹中创建了页面。

import Index from "./pages/Index";
import Login from "./pages/Login";
import Product from "./pages/Product";
import Register from "./pages/Register";
import {BrowserRouter,Route} from 'react-router-dom';

function App() {
  return (
   <div>
      <BrowserRouter>
         
          <Route path = "/">
            <Index/>
          </Route>

          <Route path = "/login">
            <Login/>
          </Route>

          <Route path = "/product">
            <Product/>
          </Route>

          <Route path = "/register">
            <Register/>
          </Route>
      
      </BrowserRouter>

   </div> 
    
  );
}

export default App;

【问题讨论】：

标签： reactjs

【解决方案1】：

像这样将所有路线包装在路线中

function App() {

  return (
    <HashRouter>
      <Routes>
        <Route path="/" element={<Index/>} />
        <Route path="/login" element={<Login/>} />
      </Routes>
    </HashRouter>
  )
}

【讨论】：

【解决方案2】：

每个 Route 使用 element 道具显示您在其道具中指定的元素。

尝试这个：

import Index from "./pages/Index";
import Login from "./pages/Login";
import Product from "./pages/Product";
import Register from "./pages/Register";
import {BrowserRouter,Route} from 'react-router-dom';

function App() {
  return (
   <div>
      <BrowserRouter>
          <Route path='/'>
            <Route index element={<Index/>} />
            <Route path="login" element={<Login/>} />
            <Route path="product" element={<Product/>} />
            <Route path="register" element={<Register/>} />
          </Route>
      </BrowserRouter>
   </div>
  );
}

export default App;

额外的上下文：

这样做的目的是在路径 / 中指定一条主路由，所有其他路由都是该主路由的子路由。

第一个嵌套路由中的 index 属性用于告诉程序这是父级的索引页面。

【讨论】：

【解决方案3】：

您需要将所有路线包装在里面航线成分。它是 react-router-dom 的一部分

import Index from "./pages/Index";
import Login from "./pages/Login";
import Product from "./pages/Product";
import Register from "./pages/Register";
import {BrowserRouter,Routes,Route} from 'react-router-dom';

function App() {
  return (
    <div>
      <BrowserRouter>
        <Routes>
          <Route path = "/" element={<Index />} />
          <Route path = "/login" element={<Login />} />
          <Route path = "/product" element={<Product />} />
          <Route path = "/register" element={<Register/>} />
        </Routes>
       </BrowserRouter>
     </div> 
 )}

export default App;

【讨论】：

【解决方案4】：

您需要在 Routes 标记中传递路径应指向的元素道具。您可以找到文档here。

这应该有效：

<Route index element={<Index/>}/>
<Route path="login" element={<Login/>}/>
<Route path="product" element={<Product/>}/>
<Route path="register" element={<Register/>}/>

【讨论】：