Question

有点奇怪，我正在测试 PageNotFound 路由，但是我输入的任何随机路由除了第一个 2 之外，似乎总是默认为带有 User 组件的第二个路由，这就是被渲染的。知道为什么会这样吗？

import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Home from "./Pages/Home";
import User from "./Pages/User";
import PageNotFound from './Pages/PageNotFound'

import "./App.css";

function App() {
  return (
    <div className="App">
      <Router>
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/:user" exact component={User} />
          <Route path="*" exact component={PageNotFound} />
        </Switch>
      </Router>
      ;
    </div>
  );
}

export default App;

Answer 1

遇到问题了，我猜是第二条路由的映射方式（/:user），我在“/”之后输入的任何内容都被选为参数并作为参数名称传递给用户组件。我将第二条路由更新到这个“/user/:id”，它工作正常，在除前两个之外的任何其他情况下，它现在默认为 PageNotFound。

import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Home from "./Pages/Home";
import User from "./Pages/User";
import PageNotFound from './Pages/PageNotFound'

import "./App.css";

function App() {
  return (
    <div className="App">
      <Router>
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/user/:id" exact component={User} />
          <Route path="*" exact component={PageNotFound} />
        </Switch>
      </Router>
      ;
    </div>
  );
}

export default App;

React 路由器默认为第二条路由

1 个答案: