Question

我开始创建自己的React应用，以便我可以更好地学习。我想单击，它将带我到About.js渲染。 About.js是一个全新的页面和新设计。有点像HTML。 About.js将具有全新的设计，但是我不确定该如何进行。我使用了react-router，但是当我单击时，它不会跳到另一页。 About.js只会在App.js上呈现。

// App.js

const styles= {
  backgroundColor: '#86e1f7', 
  transition: 'all 0.2s ease-in',
  opacity: .75
}

class App extends Component {
  render() {
    return (
      <div className='mainCat' >
        <Category style={{width: '25%', height: '100%'}} 
            title='ABOUT' background={AboutImage} position='-73px 0'/>

        <Category style={{width: '25%', height: '100%'}} 
            title='BLOG' background={BlogImage} position='-300px 0'/>

        <Category style={{width: '25%', height: '100%'}} 
            title='CONTACT' background={ContactImage} position='-30px 0'/>
      </div>

    );
  }
}

class Category extends Component {
  constructor(){
    super();
    this.state= {
        height: 0,
        marginTop: 500,
        visibility: 'hidden'
    }
    this.handleMouseOver = this.handleMouseOver.bind(this);
    this.handleMouseLeave = this.handleMouseLeave.bind(this);
  }

  handleMouseOver() {
    this.setState({
      height: 50,
      marginTop: 450,
      visibility: 'visible' 
    });
  }

  handleMouseLeave() {
    this.setState({
      height: 0,
      marginTop: 500,
      visibility: 'hidden' 
    });
  }

    render() {
      return(
        <div className='catName' style={{...this.props.style, background: `url(${this.props.background}) ${this.props.position} white no-repeat`,  backgroundSize: 'cover', overflow: 'hidden'}} 
              onMouseOver={this.handleMouseOver} onMouseLeave={this.handleMouseLeave}>
            <div style={{...styles, height: this.state.height, marginTop: this.state.marginTop, visibility: this.state.visibility}}>
                <h2 className='catTitle'>{this.props.title}</h2>
            </div>
        </div>
      );
    }
}

// About.js

export class About extends Component {
    render() {
        return(
            <div>About page</div>
        );
    }
}

Answer 1

您可以使用react-router

这是文档中的示例：

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

const Index = () => <h2>Home</h2>;
const About = () => <h2>About</h2>;
const Users = () => <h2>Users</h2>;

const AppRouter = () => (
  <Router>
    <div>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about/">About</Link>
          </li>
          <li>
            <Link to="/users/">Users</Link>
          </li>
        </ul>
      </nav>

      <Route path="/" exact component={Index} />
      <Route path="/about/" component={About} />
      <Route path="/users/" component={Users} />
    </div>
  </Router>
);

export default AppRouter;

示例：嵌套路由

此示例显示了嵌套路由的工作方式。路由/ topics加载Topics组件，该组件会在路径：id value.import React from“ react”;

上有条件地呈现任何其他内容。

import { BrowserRouter as Router, Route, Link } from "react-router-dom";

const App = () => (
  <Router>
    <div>
      <Header />

      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/topics" component={Topics} />
    </div>
  </Router>
);

const Home = () => <h2>Home</h2>;
const About = () => <h2>About</h2>;
const Topic = ({ match }) => <h3>Requested Param: {match.params.id}</h3>;
const Topics = ({ match }) => (
  <div>
    <h2>Topics</h2>

    <ul>
      <li>
        <Link to={`${match.url}/components`}>Components</Link>
      </li>
      <li>
        <Link to={`${match.url}/props-v-state`}>Props v. State</Link>
      </li>
    </ul>

    <Route path={`${match.path}/:id`} component={Topic} />
    <Route
      exact
      path={match.path}
      render={() => <h3>Please select a topic.</h3>}
    />
  </div>
);
const Header = () => (
  <ul>
    <li>
      <Link to="/">Home</Link>
    </li>
    <li>
      <Link to="/about">About</Link>
    </li>
    <li>
      <Link to="/topics">Topics</Link>
    </li>
  </ul>
);

export default App;

以下是库文档的链接：react-router

如何在React中导航到新页面？

1 个答案: