javascript - React router v4 render component inside element - Stack Overflow

admin管理员组

文章数量:1346336

I'm using the latest version of React Router v4 and I'm trying to render my page ponents Home/About inside the PageWrap div but the problem I'm having is that if I add the Routes into my header then it will switch the routes but they will display the Home/About ponent as part of the header and no where I want them to be.

If I put the routes into the PageWrap then the router doesn't work but doesn't throw any errors on the console.

How can I display and switch between ponents in the PageBody div?

Webpack link

app.js

import React from 'react'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import styled from 'styled-ponents'
import Header from './Header'

import Home from './pages/Home'
import About from './pages/About'


const Wrapper = styled.div`
  display:flex;
  min-height:100vh;
 flex:1;
 background:#eee;
`
const PageWrap = styled.div`
 margin:0 auto;
 min-width:1400px;
 background: #000;
`

class App extends React.Component { // eslint-disable-line react/prefer-
stateless-function
  render() {
    return (
  <div>
    <Header />
    <Wrapper>
      <PageWrap>
        <Router>
          <Switch>
            <Route exact path="/login" ponent={Home} />
            <Route exact path="/frontpage" ponent={About} />
            <Route exact path="/logout" render={() => (<div>logout</div>)} />
          </Switch>
        </Router>
      </PageWrap>
    </Wrapper>
  </div>
)
}
}
export default App

Header.js

import React from 'react'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
import styled from 'styled-ponents'
import Home from '../pages/Home'
import About from '../pages/About'
import Topics from '../pages/Topics'

const Wrapper = styled.div`
  width:100%;
  height:100px;
  background:papayawhip;
`

 class Header extends React.Component { // eslint-disable-line react/prefer-
 stateless-function
  render() {
   return (
   <Router>
    <Wrapper>
      <li><Link to="/">Home</Link></li>
      <li><Link to="/about">About</Link></li>
      <li><Link to="/topics">Topics</Link></li>
      <Route exact path="/" ponent={Home} />
      <Route exact path="/about" ponent={About} />
      <Route path="/topics" ponent={Topics} />
    </Wrapper>
  </Router>
  )
  }
}


export default Header

home.js

const Home = () => (<div>Home</div>)

About.js

const About = () => (<div>About</div>)

I'm using the latest version of React Router v4 and I'm trying to render my page ponents Home/About inside the PageWrap div but the problem I'm having is that if I add the Routes into my header then it will switch the routes but they will display the Home/About ponent as part of the header and no where I want them to be.

If I put the routes into the PageWrap then the router doesn't work but doesn't throw any errors on the console.

How can I display and switch between ponents in the PageBody div?

Webpack link

app.js

import React from 'react'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import styled from 'styled-ponents'
import Header from './Header'

import Home from './pages/Home'
import About from './pages/About'


const Wrapper = styled.div`
  display:flex;
  min-height:100vh;
 flex:1;
 background:#eee;
`
const PageWrap = styled.div`
 margin:0 auto;
 min-width:1400px;
 background: #000;
`

class App extends React.Component { // eslint-disable-line react/prefer-
stateless-function
  render() {
    return (
  <div>
    <Header />
    <Wrapper>
      <PageWrap>
        <Router>
          <Switch>
            <Route exact path="/login" ponent={Home} />
            <Route exact path="/frontpage" ponent={About} />
            <Route exact path="/logout" render={() => (<div>logout</div>)} />
          </Switch>
        </Router>
      </PageWrap>
    </Wrapper>
  </div>
)
}
}
export default App

Header.js

import React from 'react'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
import styled from 'styled-ponents'
import Home from '../pages/Home'
import About from '../pages/About'
import Topics from '../pages/Topics'

const Wrapper = styled.div`
  width:100%;
  height:100px;
  background:papayawhip;
`

 class Header extends React.Component { // eslint-disable-line react/prefer-
 stateless-function
  render() {
   return (
   <Router>
    <Wrapper>
      <li><Link to="/">Home</Link></li>
      <li><Link to="/about">About</Link></li>
      <li><Link to="/topics">Topics</Link></li>
      <Route exact path="/" ponent={Home} />
      <Route exact path="/about" ponent={About} />
      <Route path="/topics" ponent={Topics} />
    </Wrapper>
  </Router>
  )
  }
}


export default Header

home.js

const Home = () => (<div>Home</div>)

About.js

const About = () => (<div>About</div>)

• javascript
• reactjs
• react-router

Share Improve this question Follow asked Apr 22, 2017 at 17:55 tom harrisontom harrison 3,4331111 gold badges4747 silver badges7272 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

You should only have one <Router> in your application and it should wrap all your <Route /> and <Link/> ponents in your ponent tree.

So your render method in App ponent should be something like this.

render() {
  return (
    <Router>
      <div>
        <Header />
        <Wrapper>
          <PageWrap>
            <Switch>
              <Route exact path="/login" ponent={Home} />
              <Route exact path="/frontpage" ponent={About} />
              <Route exact path="/logout" render={() => (<div>logout</div>)} />
            </Switch>
          </PageWrap>
        </Wrapper>
      </div>
    </Router>)
}

And make sure to remove <Router> and all <Route>s from your Header ponent.

Updated WebpackBin:https://www.webpackbin./bins/-KiLrUNoJVxxLhL8UWx1

At some point, when you have "tens or hundreds" or routes you may want to delegate routing.

You can see that referred to here as child routing

本文标签： javascriptReact router v4 render component inside elementStack Overflow