Question

我正在尝试学习如何使用React在页面之间进行重定向。

我试图自己编写一些代码，但是我一直遇到问题。我为类路径创建了一个路由类，并创建了两个类。并将路由类导入到应用程序类中。我没有粘贴第二类的任何数据，因为要显示其书面段落。这就是我所做的：

import React from 'react'
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
import Firsttry from './firsttry' 
import Comp2 from "./comp2";

const Routes = () => (
  <Router>
    <Switch>
      <Route path="/" component={Firsttry} />
      <Route path="/comp2" component={Comp2} />
    </Switch>
  </Router>
);

export default Routes;

第二堂课

import React, { Component } from "react";
import { Redirect } from "react-router-dom";

class Firsttry extends Component {
  constructor(props) {
    super(props);
    this.state = {
      redirect: false
    };
  }
  onclick = () => {
    this.setState({
      redirect: true
    });
  };

  render() {
    if (this.state.redirect) {
      return <Redirect to="/comp2" />;
    }
    return (
      <div>
        <p> hello</p>
        <button onClick={this.onclick}>click me</button>
      </div>
    );
  }
}

export default Firsttry;

Answer 1

切换路线。可能永远是您的第一个路线被击中，并且永远不会渲染Comp2。

<Switch>
    <Route path='/comp2' component={Comp2}  />
    <Route path='/'  component={Firsttry}/>
</Switch>

或者您还有另一个选择：在路线中添加确切的道具。

<Switch>
  <Route exact path='/'  component={Firsttry}/>        
  <Route exact path='/comp2' component={Comp2}  />
</Switch>

Answer 2

一次Route中只有一个Switch可以处于活动状态，并且/将匹配每条路线。您可以将exact属性添加到/路由中，以确保它仅在根路径上匹配。

const Routes = () => (
  <Router>
    <Switch>
      <Route exact path="/" component={Firsttry} />
      <Route path="/comp2" component={Comp2} />
    </Switch>
  </Router>
);

如何使用Reactjs中的按钮重定向到另一个页面

2 个答案: