javascript - 创建一个按钮到新的路由reactJS

Question

真的很难理解如何创建路由到新页面(search.js)的按钮。

我尝试了不同的方法，其中一些方法可以路由到链接，但页面没有更改(但我可以看到网址已更改为搜索页面)。

*抱歉，此时代码已因多次尝试添加按钮而被破坏

App.js -

```
import React, { useState } from "react";
import { BrowserRouter as Router, Link } from 'react-router-dom';
import Route from 'react-router-dom/Route';


function App() {
  const [joke, setJoke] = useState()
  const newJoke = () => {
    fetch("http://api.icndb.com/jokes/random")
      .then(result => result.json())
      .then(result2 => {
        console.log(result2)
        setJoke(result2.value.joke)
      })
    return newJoke
  }



  return (
    <Router>
      <div className="jokeSection">
        <h1>Chuck norris jokes</h1>
        <h3>{joke}</h3>
        <button onClick={() => newJoke()}>Click here for a chuckle</button>
        <button onClick={() => { this.props.history.push("/search"); }}>Search!!</button>
      </div>
      <ul>
        <li>
          <Link to="/App">Home</Link>
        </li>
        <li>
          <Link to="/search">Search</Link>
        </li>
      </ul>

    </Router>

  )
}

export default App;```

搜索.js

    import React from "react";

    function Search() {
        return (
            <div>
                <h2>Search</h2>
            </div>
        );
    }

    export default Search;

理想情况下，我想要一个按钮(就像 onClick 按钮一样)来路由到新页面 - search.js。

我是 ReactJS 的新手，并尝试观看许多教程，但我遇到了困难。

Answer 1

在你的 app.js 文件中，你需要有 <Route>作为<Router>的 child 不是<Link> .

你可以看一下这段代码:

<Router>
    <div>
      <Route exact path="/">
        <Home />
      </Route>
      <Route path="/news">
        <NewsFeed />
      </Route>
    </div>
  </Router>

上面的代码将为您的 react 应用程序创建路由。然后您可以使用 <Link> 导航到每个选项。在你的Navbar而不是普通的a标签。