React Router：单击链接/按钮时如何重定向到不同的组件？

Question

最近刚开始学习 web-dev，所以请原谅我可能很幼稚的问题。

我见过很多使用<Link> 和<Route> 更新页面的例子。但是，大多数都包含一个固定的导航栏，链接所在的位置，组件本身只有静态内容。

如果链接/按钮位于子组件内，我还不清楚如何正确更新页面。例如，给定一个容器：

<div id='container'><h1>components should be rendered in here, but only 1 at a time.</h1></div>

还有 2 个组件，C1 和 C2：

class C1 extends React.Component {
    /*other functions*/
    render() {
        return(
            <div>
                <p>Other things</p>
                <Button>Click me to Redirect to C2!</Button>
            </ div>
        )
    }
}

class C2 extends React.Component {
    /*other functions*/
    render() {
        return(
            <div>
                <p>Other things</p>
                <a>Click me to Redirect to C1!</a>
                <p>Other things</p>
            </ div>
        )
    }
}

假设这 2 个组件将在 'container' div 下呈现，C1 是默认组件。 我应该如何设置 react-router 以在 C1 和 C2 之间导航，并且理论上可以用于两个以上的组件？

Answer 1

react-router 和 react-router-dom 是两个互补的库，可帮助您在后台使用 Javascript History package 使用浏览器历史 API。

要实现您想要的，您应该使用react-router-dom 中的BrowserRouter、Switch 和Route 组件。 BrowserRouter 充当其某些实用程序的子级的提供者以及历史记录所在的当前位置（当前主机名、路径名、queryParams 等），而 Switch 和 Route 通过 Route 协同工作将您想要的路径与 React 组件绑定以呈现和 Switch 在其所有子 Route 之间检查的组件和呈现与历史记录具有的当前路径名匹配的第一个，您可以添加 Route 而没有path 支持所以 Switch 回退到它，以防当前历史位置不匹配。

一个例子是这样的

import React from 'react'
import {BrowserRouter, Switch, Route} from 'react-router-dom'
import C1 from './C1'
import C2 from './C2'

export default class App extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return <div id="container">
            <BrowserRouter>
                <Switch>
                    <Route path="/view1" component={C1}/>
                    <Route path="/view2" component={C2}/>
                    <Route component={C1} />
                </Switch>
            </BrowserRouter>
        </div>;
    }
}

现在，有多种方法可以浏览声明的页面。一种是直接使用Link component 并使用'to' 属性传递你想要去的路径名。

class C2 extends React.Component {
    /*other functions*/
    render() {
        return(
            <div>
                <p>Other things</p>
                <Link to="/view1">Click me to Redirect to C1!</Link>
                <p>Other things</p>
            </ div>
        )
    }
}

Link 实际上会使用您通过to 属性提供的href 呈现锚。

另一种导航方法是使用history api，它在从路由渲染时作为道具注入。这允许您在实际设置新位置之前添加更多逻辑。这是一个简单的例子

class C2 extends React.Component {
    /*other functions*/
    redirectToC1(){
        // do some extra logic you may want
        this.props.history.push("/view1")
    }
    render() {
        return(
            <div>
                <p>Other things</p>
                <a onClick={() => this.redirectToC1()}>Click me to Redirect to C1!</a>
                <p>Other things</p>
            </ div>
        )
    }
}

请务必深入了解文档以查看更多信息。

Answer 2

您可以将组件调用为函数，例如：

export default class App extends React.Component {
    constructor() {
        super();
        this.state = {
            isActive: true
        };
    }
    C1 = () => {
        return <h1>C1</h1>;
    };
    C2 = () => {
        return <h1>C2</h1>;
    };
    render() {
        return <div id="container">{this.state.isActive ? this.C1 : this.C2}</div>;
    }
}

上面的例子没有使用任何路由器。你可以在这里查看如何安装和使用反应导航的文档：https://reactnavigation.org/docs/hello-react-navigation

Answer 3

您可以使用 Scrollintoview 您可以查看我制作的这个小演示以供参考demo

这个stackoverflow也很有用