javascript - 创建一个新路线的按钮reactJS(Creating a button to a new route reactJS)

Question

Really struggling with understanding how to create a button which routes to a new page (search.js).(真正难以理解如何创建一个可路由到新页面的按钮（search.js）。)

I've tried different methods which some have worked in routing to the link but the page does not change (but I can see the url being changed to the search page).(我尝试了一些方法，其中一些方法已将其路由到链接，但页面没有更改（但是我可以看到URL更改为搜索页面）。)

*sorry at this point the code has been butchered with numerous attempts of adding the button(*很抱歉，此刻代码已被无数次尝试添加按钮)

App.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;```

Search.js(Search.js)

    import React from "react";

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

    export default Search;

Ideally I want a button (just like the button onClick) to route to a new page - search.js.(理想情况下，我希望一个按钮（就像按钮onClick一样）路由到新页面-search.js。)

I'm new to ReactJS and have tried to watch many tutorials but i'm having difficulty.(我是ReactJS的新手，并尝试观看了许多教程，但是我遇到了困难。)

  ask by Sharoze Khan translate from so

Answer 1

In your app.js file you need to have <Route> as children of <Router> not <Link> .(在您的app.js文件中，您需要将<Route>作为<Router>子级，而不是<Link> 。)

You can look over this code:(您可以查看以下代码：)

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

The above code will create routes for your react application.(上面的代码将为您的react应用程序创建路由。)

Then you can navigate to each of them using <Link> in your Navbar rather than ordinary a tag.(然后，您可以使用导航Navbar <Link>而不是普通a标签来导航至每个标签。)