Question

我有一些类似于以下 CodeSandBox 示例的内容，我需要在两个不同的组件中使用 react 路由。

我面临的问题是，如果使用此代码和框示例并单击到 Profile 或 Quotes 组件级别，并假设我在每个组件中都有以下 Material-UI 按钮这些底部组件：

            <Button>
                text="New Item"
                variant="outlined"
                className={classes.newButton}
                component={NewItem} 
                to={'/new-item'}
            </Button>

当点击这个“New Item”按钮时，URL 更改为正确的路由，即 /new-item 但实际的 NewItem 组件并未在页面中呈现？

如果我刷新浏览器，它就会正确加载。

任何人都可以在此级别上协助上述问题以及最佳解决方案是什么？

Answer 1

亚瑟，请确保在您的 index.js 或任何您声明开关的地方都这样设置。

<Switch>
      <Route exact path="/NewItem" component={NewItem}/>
</Switch>

然后你可以像这样简单地添加一个导航链接

<Link to="/NewItem">New Item</Link>

Answer 2

按钮将有一个从 Link 导入的 react-router-dom 组件

 <Button>
        text="New Item"
        variant="outlined"
        className={classes.newButton}
        component={Link} 
        to="/new-item"
 </Button>

在 app.js 中，您将创建一个 Route，如下所示：

<Switch>
      <Route exact path="/NewItem" component={NewItem}/>
</Switch>

Answer 3

好吧，您不应该使用按钮来更改转到新页面或转到新 URL。而不是使用 <link to=""/> 用于路由，但如果您想使用按钮转到不同的页面而不是使用来自 react-router-dom

的重定向

import { Redirect } from 'react-router-dom';
    const Next = (e) => {
    e.preventDefault();
    return <Redirect to='/NewItem' />;
    };
    <Button onClick={Next}>
         text="New Item" variant="outlined" className={classes.newButton}
         component={NewItem}
    </Button>;

或者您可以使用 Link

使用链接

import {Link} from 'react-router-dom';
    
    <Link to={'/NewItem'} className={classes.newButton}>
         New Item
    </Link>;

React 路由器 url 更改正确，但组件未从按钮组件链接呈现

3 个答案: