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

I have a Header component like:

我有一个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

and in my App.js:

在我的App.js中:

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

My intention here is to show header all the time like navbar..

我的目的是像导航栏一样显示标题。

and I have router like:

我有路由器像:

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

Here in my Header when I click on One or Two it should redirect in that page.

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

Also the main thing I want is I want Header component in every page.. Like navbar..

我想要的主要是我想在每个页面中都有Header组件..就像navbar ..

In my App.js I have only Header component. When I go to / in the browser it should show Login page as default..

在我的App.js中,我只有Header组件。当我进入/浏览器时,它应该显示登录页面为默认值。

I need guide to go through this..

我需要指南来完成这个..

I am very new to react

我很反应

Thanks in advance..

提前致谢..

1 个解决方案

#1

1. Addition {this.props.children} in your App.js like this:

1.在您的App.js中添加{this.props.children},如下所示:

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

and change routes file

并更改路线文件

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

to show header all the time like navbar.

像导航栏一样显示标题。

2. Simple authentication example

2.简单的验证示例

react-router auth example

react-router auth示例

#1