react-router-dom 无法按预期使用路由

Posted 2023-02-19

【中文标题】react-router-dom 无法按预期使用路由

【英文标题】：react-router-dom not working as expected with routes

【发布时间】：2022-01-21 09:52:03

【问题描述】：

我正在了解 react-router-dom 库和提供路由的组件，并注意到如下奇怪的行为。

假设我们的 App.js 组件返回 JSX 代码如下。

import './App.css';
import ColorAdder from './ColorAdder';
import Switch,Route from 'react-router-dom';
function App() 
  
  return (
  <Switch>
     <ColorAdder/>
     <Route path="/hello" exact>
        <p>Hello</p>
    </Route>
   </Switch>    
  );


export default App;

现在ColorAdder.js 组件还包含具有Path 和exact 属性的路由，声明如下。

import  Route  from "react-router-dom";
const ColorAdder = ()=>
  return (
    <Route path="/hi" exact>
        <p>Hi</p>
    </Route>
  )

export default ColorAdder;

App.js 用 <BrowserRouter> 包裹，我注意到当我们使用 url http://localhost:3002/hi 测试页面时，它按预期返回了 Hi，但它没有为 'http://localhost:3002 返回任何内容/你好'。为什么它会这样？谁能解释一下这种行为，为什么带有hello 路径的Route 即使在Switch 包装和Path 和exact 属性下也无法识别

下面是使用BrowserRouter的Index.js

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

版本： react-router-dom@5, npm - 7.20.3， 节点 - v16​​.7.0

【问题讨论】：

在较新版本中 switch 被替换为 Routes reactrouter.com/docs/en/v6/getting-started/overview 看看

【参考方案1】：

首先，最好的做法是在 app.js 中添加路由逻辑，并且不要在 switch 中呈现 <ColorAdder/>，而是使用 component 属性，如下所示：-

您的 App.js：-

import './App.css';
import ColorAdder from './ColorAdder';
import Switch,Route from 'react-router-dom';

function App() 
  
  return (
  <Switch>
     <Route path="/hi" component=colorAdder exact></Route>
// if you have other routes do like this 
 <Route path="/hello" component=<p>hello</p> exact></Route>
  // instead of hard coding <p>hello </p> here you can create a separate component that render the helloComponent
   </Switch>    
  );

你的 ColorAdder.js :-它应该只返回内容因为路由逻辑是在 app.js 中完成的

import  Route  from "react-router-dom";
const ColorAdder = ()=>
  return (
    <p> h1 </p>
  )

export default ColorAdder;

注意：- BrowserRouter 应该在 index.js 中，它应该包装应用组件

<BrowserRouter>
    <App />
  </BrowserRouter>,

【讨论】：

谢谢，App 组件用 包裹在 index.js 中。路由可以包含在任何地方，这也是在 App.js 级别指定 BrowserRouter 的原因。因此，当将 Routes 放置在其中时，ColorAdder 组件应该可以工作。如果我按照建议的方法放置路线，那么在一个组件中拥有数百条路线不会很笨拙吗？我宁愿打破多个组件中的路由以利用 BrowserRouter 的优势，它也可能是 react-router-dom 的错误？

你可以有多个组件来做路由，但是在编程中有一个很好的原则单一责任原则，它指出一个类应该只有一个责任，回到我们的问题最好做路由逻辑在一个组件中，无论是 app.js 还是 router.js 或另一个文件，最重要的是，无论何时要添加，修改路由内容，您都可以轻松转到该文件并进行修改，而不是搜索要修改的文件希望有帮助

好的..但是从技术上讲，在“ColorAdder”之外定义的路由应该可以工作，并且为了应用程序的可扩展性，我们已经对路由进行了分类（假设那些与用户打交道）属于一个组件，而那些处理与 Product 在另一个组件下。它很容易确定将来要修改哪个路径以及在哪里查看路径和路径是否已分类，而不是在一个文件中定义一个包含数千条路径和路径的巨大组件，尽管所有这些都是固执己见的。我怀疑它是否是 react-router-dom 库本身的错误。

如果它更适合你，你可以这样做我只是推荐最佳实践，顺便说一句 react-router-dom 的错误是什么？

ColorAdder.js 外部描述的 Route 和 App.js 中描述的 Route 应该被识别。请检查屏幕截图。拥有精益代码和分类信息也是一种最佳实践。 React 的设计目的是在我们想要的任何地方进行繁重的工作和渲染，因此路线不能仅限于某个地方，并且应该是灵活的。