单击后响应重定向到路由器 URL 并显示默认页面

react redirect to router url after click and display default page

本文关键字：显示 默认 URL 路由器 响应 重定向 单击      更新时间：2023-09-26

>我有一个Header组件，如下所示：

class Header extends Component {
  render() {
    return (
      <div>
        <h3><Link to="/:one">One</Link></h3>
        <h3><Link to="/:two">Two</Link></h3>
      </div>
    )
  }
}
export default Header

在我的App.js：

class App extends Component {
  render() {
    return (
      <div>
        <Header />
      </div>
    )
  }
}
export default App

我在这里的目的是像导航栏一样一直显示标题。

我有这样的路由器：

const routes =  (
  <Route path="/" component={App}>
        <Route path="/:login" component={Login} />
        <Route path="/:one" component={One} />
        <Route path="/:two" component={Two} />
  </Route>
)
export default routes

在我的Header中，当我单击One或Two时，它应该在该页面中重定向。

另外，我想要的主要事情是我希望每个页面中都有Header组件。像导航栏一样。

在我的App.js中，我只有Header组件。当我在浏览器中转到/时，它应该Login页面显示为默认值。

我需要指南来经历这个..

我对反应很陌生

提前谢谢..

1. 在App.js中添加{this.props.children}，如下所示：

class App extends Component {
  render() {
    return ( 
        <div>
            <Header />
            {this.props.children}
        </div>
    )
  }
}
export default App

和更改路由文件

const routes =  (
  <Route path="/" component={App}>
        <Route path="/login" component={Login} />
        <Route path="/one" component={One} />
        <Route path="/two" component={Two} />
  </Route>
)
export default routes

像导航栏一样一直显示标题。

阿拉伯数字。简单身份验证示例

反应路由器身份验证示例

相关文章：