javascript React工艺路线：如何在单击链接/按钮时重定向到不同的组件？

f87krz0w 于 2023-01-11 发布在 Java

关注(0)|答案(3)|浏览(163)

最近刚开始学习网络开发，所以请原谅我可能天真的问题。
我见过很多使用<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>
        )
    }
}

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

JavaScript

来源：https://stackoverflow.com/questions/67118055/react-router-how-to-redirect-to-a-different-component-when-a-link-button-is-cli

3条答案

按热度按时间

pdkcd3nj1#

react-router和react-router-dom是两个互补的库，它们帮助您在幕后使用Javascript History package来使用浏览器历史API。
要实现所需的功能，应使用react-router-dom中的BrowserRouter、Switch和Route组件。BrowserRouter充当某些实用程序的子程序和历史记录当前位置的提供程序（当前主机名、路径名、查询参数、等等）而Switch和Route一起工作，Route是将所需路径与要呈现的React组件绑定的组件，Switch是该组件检查其所有子Route并渲染与历史记录当前路径名匹配的第一个，您可以添加一个没有path属性的Route，以便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，它在从Route渲染时作为prop注入，这允许您在实际设置新位置之前添加更多逻辑。

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>
        )
    }
}

请务必深入阅读文档以了解更多信息。

赞(0）回复(0）举报 2023-01-11

u5rb5r592#

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

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>;
    }
}

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

赞(0）回复(0）举报 2023-01-11

kgqe7b3p3#

你可以使用Scrollintoview你可以看看这个小演示我做的参考demo
此stackoverflow也将非常有用

赞(0）回复(0）举报 2023-01-11