2

Pretty much title. I have an unordered list of but the links only change the URL, not the actual component being displayed on the page. Any ideas as to why that might be happening? I think I've included all relevant code but let me know if I'm missing something. Thanks!

App.js

import React, { Component } from 'react';
import Header from './Header';
import Main from './Main';

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

Header.js

import React, {Component} from 'react';
import {Link} from 'react-router-dom';

class Header extends Component {
render() {
    return(
        <div>
            <hr />
            <div className="table">
                <ul id="horizontal-list">
                    <li><Link to='/'>Component1</Link></li>
                    <li><Link to='/ts'>Component2</Link></li>
                    <li><Link to='/cs'>Component3</Link></li>
                    <li><Link to='/cw'>Component4</Link></li>
                </ul>
             </div>
             <hr />
        </div>

    );
  }
}
export default Header

Main.js

import React from 'react';
import {BrowserRouter as Router, Route} from 'react-router-dom';
import Component1 from './components/Component1';
import Component2 from './components/Component2';
import Component3 from './components/Component3';
import Component4 from './components/Component4';


class Main extends Component {
    <Router>
        <div>
            <Route exact path='/' component={Component1} />
            <Route path='/ts' component={Component2} />
            <Route path='/cs' component={Component3} />
            <Route path='/cw' component={Component4} />
        </div>
    </Router>
);

export default Main                

index.js

import React from 'react';
import {render} from 'react-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import {BrowserRouter} from 'react-router-dom';

render((
    <BrowserRouter>
        <App />
    </BrowserRouter>
), document.getElementById('root'));
registerServiceWorker();    

1 Answer 1

2

Your <Link/> components need to be children of the same <Router/> component as your <Route/> components.

Remove the <Router/> from the <Main/> component and place it in the nearest ancestor of both <Main/> and <Header/>. Which would be your <App/> component.

Sign up to request clarification or add additional context in comments.

2 Comments

Ok cool I just updated my code with your suggestion and now I'm getting this error within index.js: A <Router> may have only one child element
So put a div as the only child of your <Router/> and then place the <Header/> and <Main/> components inside of that div. Wrap the div that currently wraps those two components with the <Router/> instead of replacing it with it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.