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

Question

我正在了解 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

Answer 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>,