时间戳

首页 > 解决方案 > 当用户使用 React Router 点击一个类别时，我如何打开一个新网页？

javascript - 当用户使用 React Router 点击一个类别时，我如何打开一个新网页？

问题描述

这是我的 index.js

ReactDOM.render(
    <div>
      <Home />
      <App />
    </div>,
  document.getElementById('root')
)

应用程序中所有 ROUTES 的 App.js

function App() {
  return(
    <Router>
      <Switch>
        <Route path="/cpu" exact component={Info}/>   
      </Switch>
    </Router>
  )
}

Home.class 中的导航功能

function Navs(){
  return(
    ReactDOM.render(
      <div className="Navs">
        <ul>
          <Router>
            <Link to="/cpu">CPU</Link>
            <Link to="/Monitors">MONITORS</Link>
            <Link to="/GPU">GPUS</Link>
            <Link to="/Ram">RAMS</Link>
            <Link to="/Keyboards">KEYBOARDS</Link>
            <Link to="/Mouse">MOUSE </Link> 
            <Link to="/Others">OTHER ACCESORIES</Link>
          </Router>
        </ul>
      </div>
      ,document.getElementById('Navs')
    )
  )
}

CPU.jsx(用户点击cpu类别时要渲染的组件

function Info(){
  render(
    <h1>Hello in cpus </h1>
  )
  return null
}

问题是当我在 cpu 上导航时，它显示相同的主页，但其中呈现了 cpu 组件。但路径更改为“http://localhost:3000/cpu”

标签： javascriptreactjsreact-router

解决方案

您的程序运行正常。你ReactDOM.render总是渲染Home和App. 但App在根目录中为空。如果单击路由/cpu，Info组件将显示在App组件内。Home保持不受影响。

我会从中Home取出并在组件中ReactDOM.render为其分配一条路线。App但不要忘记分配路线exact path，Home否则你仍然有相同的结果;-)

这将对您有所帮助： https ://reactrouter.com/web/guides/quick-start

推荐阅读