reactjs - 如果我放入另一个组件，则反应路由器 dom 的切换不起作用

Question

我正在学习反应，我尝试使用 react-router-dom 在我的页面之间切换。

我有一个带有链接的组件菜单，我将此组件调用到我的 App 组件中，但它不起作用。但是，如果将我的链接直接放入我的 App 组件中，它会很好地工作。

而且，如果我离开它也不起作用，to="/"但我在第一个链接上放了其他东西to="/home"。

const Menu = () => {
  const padding = {
    paddingRight: 5
  }
  return (
    <Router>
        <Link style={padding} to="/">anecdotes</Link>
        <Link style={padding} to="/create">create new</Link>
        <Link style={padding} to="/about">about</Link>
    </Router>
  )
}

还有一个返回我的路由的组件 App.js

  return (
    <div>
      <h1>Software anecdotes</h1>
      <Menu />
      <Router>
        <Switch>
          <Route path="/s">
              <AnecdoteList anecdotes={anecdotes} />
          </Route>
          <Route path="/create">
              <CreateNew addNew={addNew} />
          </Route>
          <Route path="/about">
              <About />
          </Route>
        </Switch>
      </Router>
      <Footer />
    </div>
  )

标签： reactjsreact-router-dom

Answer 1

Router从您的组件中删除，main然后它会正常工作。