React Router Links получает изменения, но не вид

Question

Привет, я везде гуглил о своей проблеме, но мне все равно не повезло. Здесь я прикрепил мой пример кода.

import React from 'react';
import {
  BrowserRouter,
  Route,
  Switch,
  NavLink,
  Redirect
} from "react-router-dom";

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> 
        <div>
          <Switch >
           <Route path={"/"} component={Login} />
           <Route path={"/Login"} component={Login}/> 
           <Route path={"/Register"} component = {Register}/>
          </Switch> 
        </div>
      </>
    );
  }
}

class App extends React.Component {
  render() {
    return ( 
      <BrowserRouter >
        <Switch >
         <Route path="/" component={Authenticate}/> 
         <Route path="/AppHome" component={AppHome}/> 
        </Switch> 
      </BrowserRouter>
    )
  }
}

export default App;

Здесь, в Localhost:3000, я установил логин Component по умолчанию, чтобы показать. это показывает представление, но при нажатии на ссылку регистрации, URL только изменяет не представление. что я сделал не так?

Answer 1

Вы пытаетесь вложить маршруты, но в вашем случае это кажется ненужным.

Я бы настроил свои маршруты следующим образом без вложенной маршрутизации:

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

Answer 2

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>

Можете ли вы проверить это Codesandbox Один раз.