react-router-dom 中的多页路由问题

Posted 2023-02-22

【中文标题】react-router-dom 中的多页路由问题

【英文标题】：Problem with multiple page routing in react-router-dom

【发布时间】：2020-04-14 18:41:37

【问题描述】：

我正在制作一个具有欢迎和用户页面的应用程序，我使用条件来了解用户何时登录，因此我可以关闭登录和注册路线，但它似乎没有呈现页面.

./App.js

...
componentdidMount() 
  firebase.auth().onAuthStateChanged(user => this.setState(auth: user))


render() 
  let Routing;
  if (this.state.auth) 
    Routing = (
      <Route path="/dashboard"><Dashboard /></Route>
    )
   else 
    Routing = (
      <Route path="/"><WelcomePage /></Route>
      <Route path="/login"><Login /></Route>
      <Route path="/signup"><Signup /></Route>
    )
  

  return <BrowserRouter>Routing</BrowserRouter>

我哪里做错了？

【问题讨论】：

可能是因为组件名称中的拼写错误？您正在尝试在设置变量 Routing 时渲染 Rounting

【参考方案1】：

精确匹配网址

Routing = (
      <Route exact path="/"><WelcomePage /></Route>
      <Route path="/login"><Login /></Route>
      <Route path="/signup"><Signup /></Route>
    )