CODEWITHSUNDEEP
javascriptreactjs
Joe Consterdine
Joe Consterdine

Reputation: 1053

React Router V4 Path Issues

I'm using React Router Dom V4, my path to my homepage works but my path to my about page doesn't work.

I'm not sure if it's anything to do with the fact I'm using Xampp or not.

Index.js

import React from "react";
import { render } from "react-dom";
import { BrowserRouter as Router, Route } from "react-router-dom";
import App from "./components/App";
import About from "./components/About";

const Root = () => {
    return (
        <Router>
            <div>
                <Route path="/" component={App} />
                <Route path="/about" component={About} />
            </div>
        </Router>
    )
}

render(<Root />, document.getElementById('main'));

Header.js

import React from "react";

const Header = () => {
    return (
        <div>
            <ul>
                <li><a href="/about">About</a></li>
            </ul>
        </div>
    )
}

export default Header;

About.js

import React from "react";

const About = () => {
    return (
        <p>This is the about page</p>
    )
}

export default About;

Upvotes: 0

Views: 123

Answers (1)

Meier
Meier

Reputation: 3880

The problem is that you use plain html links, so React will not be called when the user clicks the link. You should use the Link Element from the router-module.

Try the following for the menu:

import { Link } from "react-router-dom"
....
<li><Link to='/about'>About</Link></li>

Upvotes: 3

Related Questions