score:0

import react from 'react'
import reactdom from 'react-dom'
import {hashrouter, route, switch, navlink} from 'react-router-dom'

class app extends react.component {
  render() {
    return (
      <hashrouter>
        <switch>
          <route path="/login" component={login} />
          <route path="/register" component={register} />
          <route path="/" component={apphome} />
        </switch>
      </hashrouter>
    )
  }
}

const login = () => (
  <div>
    login content <navlink to="/apphome"> go to app</navlink>
  </div>
)

const register = () => <div> register content </div>

const apphome = () => <div> welcome to the app </div>

export default app

reactdom.render(<app />, document.getelementbyid('root'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

can you please check this codesandbox once.

score:1

you are trying to nest the routes, but in your case this seems unnecessary.

i would setup my routes like this without nested routing:

import react from "react";
import {
  browserrouter,
  route,
  switch,
  navlink,
  redirect
} from "react-router-dom";

class app extends react.component {
  render() {
    return (
      <browserrouter>
        <authenticate />
        <switch>
          <route path="/" exact component={login} />
          <route path="/login" component={login} />
          <route path="/register" component={register} />
          <route path="/apphome" component={apphome} />
        </switch>
      </browserrouter>
    );
  }
}

const login = () => (
  <div>
    login content <navlink to="/apphome"> go to app</navlink>
  </div>
);

const register = () => <div> register content </div>;

const apphome = () => <div> welcome to the app </div>;

class authenticate extends react.component {
  render() {
    return (
      <>
        <div>
          <navlink to={"/login"}> login </navlink>
          <navlink to={"/register"}> register </navlink>
        </div>
      </>
    );
  }
}

export default app;

codesandbox


Related Query

More Query from same tag