Маршрутизация в React JS по клику - PullRequest
Новая
       27

Маршрутизация в React JS по клику

0 голосов
/ 23 октября 2018

Я новичок в 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;

Пожалуйста, помогите мне с этим кодом выполнить базовую маршрутизацию в реагировать JS

Ответы [ 3 ]

0 голосов
/ 23 октября 2018

Я рекомендую вам взглянуть на doc .

<Route path="/hello" component={Hello}/> отобразит компонент Hello именно там, где <Route/>, но я думаю, что ваша функция здесь ничего не сделает, так каквозвращает <div> но куда он девается?

Вам нужен какой-то "более высокий" компонент, который будет визуализировать ваши маршруты, затем вызовите <Link/>

Затем попробуйте вложить кнопку внутрь<Link/>? 

<Link to="/??">
     <button id="b1">
          Click me
     </button>
</Link>
0 голосов
/ 23 октября 2018

в вашем коде 

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

вы просто нажимаете на маршрут, и переход на другую страницу не является действием

приведенный ниже код будет работать нормально, и рекомендуется размещать маршрутизатор вотдельный компонент. нажмите здесь Вы можете найти этот код в codeandbox 

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);
0 голосов
/ 23 октября 2018

Вы не можете вернуть JSX в обработчик onClick, поскольку он ничего с этим не сделает.

Вам необходимо заранее настроить маршруты при рендеринге и использовать history.push для изменения маршрута

Ниже приведен пример кода, который вы можете указать 

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>
);
...