reactjs - 反应路由器和链接都指向同一页面？

Question

我拉扯我的头发试图弄清楚为什么反应链接列表只是加载错误页面。有人可以建议吗？它几乎是之前完美运行的项目的直接副本。

路由器设置

function App() {
  return (
  <Router>
    <Switch>
      <Route exact path = '/'>
        <Home />
      </Route>
      <Route path = "*">
        <Error />
      </Route>
      <Route path = '/about'>
        <About />
      </Route>
      <Route path = '/contact'>
        <Contact />
      </Route>
      <Route path = '/deckbuilder'>
        <DeckBuilder />
      </Route>
    </Switch>
  </Router>
  )
}

export default App;

主页上的链接

export const Home = () => {
    return (
        <div>
            <h1> Home Page </h1>
            <Link to = '/contact'>
                Contact
            </Link>
            <Link to = '/about'>
                about
            </Link>
            <Link to = '*'>
                Error
            </Link>
            <Link to = '/deckbuilder'>
                Deck
            </Link>
        </div>
        
    )
}

标签： reactjsreact-router

Answer 1

您应该像这样使用反应路由器并最后放置错误组件，这是正确的语法：

        <Switch>
            <Route exact path='/' component={Landing} />
            <Route exact path='/sign' component={Sign} />
            <Route exact path='/login' component={Dashboard} />
            <Route component={GenericNotFound} />
        </Switch>