javascript React错误：没有与位置"/"匹配的路由

aemubtdh 于 2022-12-21 发布在 Java

关注(0)|答案(4)|浏览(256)

我的React应用程序显示错误No routes matched location "/"
我的App.js看起来像：

import Form from './components/Form';
import NavMenu from './components/NavMenu';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

function App() {

  // Irrelevant code
  
  return (
    <Router>
      <div>
        <NavMenu />
        <Routes>
          <Route path="/:nav_string" element={<Form />}></Route>
        </Routes>
      </div>
    </Router>
  );
}

export default App;

你知道为什么会这样吗？
我消除了这个错误，虽然它不是一个干净的解决方案。我创建了一个新的组件Home.js，用“/”路径将其添加到App.js：

return (
  <Router>
    <div className="content">
      <NavMenu response={response}/>
      <Routes>
        <Route path="/" element={<Home />}></Route> // Added home element
        <Route path="/:nav_string" element={<Form response={response} />}></Route>
      </Routes>
    </div>
  </Router>
);

虽然我不太喜欢这个解决方案，因为Home.js返回null，但我创建它只是为了消除这个警告。如果实际上不需要路径匹配/的路由，该怎么办？

JavaScript

来源：https://stackoverflow.com/questions/74871230/react-error-no-routes-matched-location

4条答案

按热度按时间

j2qf4p5b1#

如果您真的不需要呈现"/"路径上的任何内容，则可以呈现一个到表单路由的重定向，可能使用一些默认值。
示例：

return (
  <Router>
    <div className="content">
      <NavMenu response={response} />
      <Routes>
        <Route path="/" element={<Navigate to="/someDefaultValue" replace />} />
        <Route path="/:nav_string" element={<Form response={response} />} />
      </Routes>
    </div>
  </Router>
);

一种替代方案也可以是在两条路线上呈现Form组件。RRD被优化，使得当在路线之间导航时或者当nav_string参数值改变时，Form组件保持被装载。
示例：

return (
  <Router>
    <div className="content">
      <NavMenu response={response} />
      <Routes>
        <Route path="/" element={<Form response={response} />} />
        <Route path="/:nav_string" element={<Form response={response} />} />
      </Routes>
    </div>
  </Router>
);

只需确保Form可以处理可能未定义的nav_string参数值。您可以提供一个回退值。

const { nav_string = "someDefaultValue" } = useParams();

然后总是有一个"捕获所有"路由，您可以在其中为任何"未处理"路由呈现一些后备UI，这将包括"/"。
示例：

return (
  <Router>
    <div className="content">
      <NavMenu response={response} />
      <Routes>
        <Route path="*" element={<NotFound />} />
        <Route path="/:nav_string" element={<Form response={response} />} />
      </Routes>
    </div>
  </Router>
);

赞(0）回复(0）举报 2022-12-21

0lvr5msh2#

可以添加404路由
当没有与url匹配的路由时，将显示未找到页面

return (
  <Router>
    <div className="content">
      <NavMenu response={response}/>
      <Routes>
        <Route path="/:nav_string" element={<Form response={response} />}></Route>
        <Route path='*' element={<NotFound />} /> {/* You can change NotFound element*/}
      </Routes>
    </div>
  </Router>
);

赞(0）回复(0）举报 2022-12-21

fxnxkyjh3#

这应有助于：

<BrowserRouter>
 <NavMenu/>
   <Routes>
        <Route path="/" element={<Form/>}></Route>
   <Routes/>
<BrowserRouter/>

赞(0）回复(0）举报 2022-12-21

gopyfrb34#

"/:nav_string"的格式是路径参数，例如"/Product"中没有"/"路径尝试类型，则它求解

赞(0）回复(0）举报 2022-12-21

我来回答

javascript React错误：没有与位置"/"匹配的路由

4条答案

相关问题

热门标签

最新问答