单击时在 React JS 中路由

Question

我是 React 新手，我想在单击按钮时导航到另一个组件。我只想执行一个简单的路由。这是我尝试过的代码。但我无法路由它。

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom'
import Hello from './HelloComponent';
class App extends Component {

  constructor(props) {
    super(props);
    this.try = this.try.bind(this)
  }
  try = () => {
    alert();
    <div>
      <Router>
        <Route path="/hello" component={Hello} />
      </Router>
    </div>
  }
  render() {
    return (
      <div className="App">
        <div className="container">

          <button id="b1" onClick={this.try}>Click me</button>
        </div>
      </div>
    );
  }
}
export default App;

请帮我用这段代码在 React JS 中执行基本路由

Answer 1

您不能将 JSX 返回到 onClick 处理程序，因为它不会对它做任何事情。

你需要提前在render中配置你的Routes并使用history.push来改变Route

下面是一个示例代码，你可以参考

import React, { Component } from 'react';
import { BrowserRouter as Router, Route,Switch, Redirect} from 'react-router-dom'
import Hello from './HelloComponent';
class App extends Component {
  try = () => {
      this.props.history.push('/hello');
  }
  render() {
    return (
      <div className="App">
        <div className="container">
            <button id="b1" onClick ={this.try}>Click me</button>
            <Route path="/hello" component={Hello}/>
        </div>
      </div>
    );
  }
}
export default () => (
   <div>
      <Router>
           <Route component={App} />
      </Router>
  </div>
);

Answer 2

我建议你看看doc。

<Route path="/hello" component={Hello}/> 将在 <Route/> 所在的位置显示 Hello 组件，但我认为您的函数在这里什么都不做，因为它返回一个 <div> 但它会去哪里？

您需要某种“更高”的组件来呈现您的路线，然后调用<Link/>

然后尝试将按钮嵌套在<Link/> 中？

<Link to="/??">
     <button id="b1">
          Click me
     </button>
</Link>

Answer 3

在你的代码中

try = () => {
             alert();
            <div>
              <Router>
                   <Route path="/hello" component={Hello}/>
              </Router>
            </div>
           }

您只是在推动路线，并不是将您带到不同页面的操作

下面的代码可以正常工作，最好将路由器放在单独的组件中。 click here你可以在codesandbox中找到这段代码

import React, { Component } from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import "./styles.css";

function RouterComponet() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={App} />
        <Route path="/user" component={User} />
      </Switch>
    </Router>
  );
}
class App extends Component {
  constructor(props) {
    super(props);
  }
  onClick = () => {
    this.props.history.push("/user");
  };
  render() {
    return (
      <div>
        <h1>App component</h1>
        <a onClick={this.onClick} className="link">
          click here
        </a>{" "}
        to user page
      </div>
    );
  }
}

class User extends Component {
  constructor(props) {
    super(props);
  }
  onClick = () => {
    this.props.history.push("/");
  };
  render() {
    return (
      <div>
        <h1>User Componet</h1>
        <a onClick={this.onClick} className="link">
          click here
        </a>{" "}
        to back
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<RouterComponet />, rootElement);

Answer 4

我创建了一个演示，将所有内容结合在一起。它包含三个文件App.js、About.js、Contacts.js。要导航到任何组件，您需要在 App.js 中添加其路由，然后根据您的按钮 (About.js) 的位置，使用 Link 将其包裹，以帮助元素导航到指定路线。单击时，应加载联系人组件。希望这可以帮助。 code demo

App.js

import React from "react";
import { Switch, Route, BrowserRouter } from "react-router-dom";
import About from "./About";
import Contact from "./Contacts";

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/" component={About} exact />
        <Route path="/contacts" component={Contact} />
      </Switch>
    </BrowserRouter>
  );
}

export default App;

关于.js

import React from "react";
import { Link } from "react-router-dom";

function About() {
  return (
    <div>
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting
        industry.
      </p>
      <Link to="/contacts">
        <button>click me</button>
      </Link>
    </div>
  );
}
export default About;

Contacts.js

import React from "react";

function Contact() {
  return <div>Call me!!</div>;
}
export default Contact;