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

import React from 'react'; import { BrowserRouter, Route, Switch, NavLink, Redirect } from "react-router-dom"; const Login = () ={amp}gt; {amp}lt;div{amp}gt; Login Content {amp}lt;NavLink to ="/AppHome"{amp}gt; go to App{amp}lt;/NavLink{amp}gt; {amp}lt;/div{amp}gt;; const Register = () ={amp}gt; {amp}lt;div{amp}gt; Register Content {amp}lt;/div{amp}gt;; const AppHome = () ={amp}gt; {amp}lt;div{amp}gt; Welcome to the App {amp}lt;/div{amp}gt;; class Authenticate extends React.Component { render() { return ( {amp}lt;{amp}gt; {amp}lt;div{amp}gt; {amp}lt;NavLink to={"/Login"}{amp}gt; Login {amp}lt;/NavLink{amp}gt; {amp}lt;NavLink to = {"/Register"} {amp}gt; Register {amp}lt; /NavLink{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div{amp}gt; {amp}lt;Switch {amp}gt; {amp}lt;Route path={"/"} component={Login} /{amp}gt; {amp}lt;Route path={"/Login"} component={Login}/{amp}gt; {amp}lt;Route path={"/Register"} component = {Register}/{amp}gt; {amp}lt;/Switch{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/{amp}gt; ); } } class App extends React.Component { render() { return ( {amp}lt;BrowserRouter {amp}gt; {amp}lt;Switch {amp}gt; {amp}lt;Route path="/" component={Authenticate}/{amp}gt; {amp}lt;Route path="/AppHome" component={AppHome}/{amp}gt; {amp}lt;/Switch{amp}gt; {amp}lt;/BrowserRouter{amp}gt; ) } } export default App; 

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

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

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

 import React from "react"; import { BrowserRouter, Route, Switch, NavLink, Redirect } from "react-router-dom"; class App extends React.Component { render() { return ( {amp}lt;BrowserRouter{amp}gt; {amp}lt;Authenticate /{amp}gt; {amp}lt;Switch{amp}gt; {amp}lt;Route path="/" exact component={Login} /{amp}gt; {amp}lt;Route path="/Login" component={Login} /{amp}gt; {amp}lt;Route path="/Register" component={Register} /{amp}gt; {amp}lt;Route path="/AppHome" component={AppHome} /{amp}gt; {amp}lt;/Switch{amp}gt; {amp}lt;/BrowserRouter{amp}gt; ); } } const Login = () ={amp}gt; ( {amp}lt;div{amp}gt; Login Content {amp}lt;NavLink to="/AppHome"{amp}gt; go to App{amp}lt;/NavLink{amp}gt; {amp}lt;/div{amp}gt; ); const Register = () ={amp}gt; {amp}lt;div{amp}gt; Register Content {amp}lt;/div{amp}gt;; const AppHome = () ={amp}gt; {amp}lt;div{amp}gt; Welcome to the App {amp}lt;/div{amp}gt;; class Authenticate extends React.Component { render() { return ( {amp}lt;{amp}gt; {amp}lt;div{amp}gt; {amp}lt;NavLink to={"/Login"}{amp}gt; Login {amp}lt;/NavLink{amp}gt; {amp}lt;NavLink to={"/Register"}{amp}gt; Register {amp}lt;/NavLink{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/{amp}gt; ); } } export default App; 

Codesandbox

 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 ( {amp}lt;HashRouter{amp}gt; {amp}lt;Switch{amp}gt; {amp}lt;Route path="/Login" component={Login} /{amp}gt; {amp}lt;Route path="/Register" component={Register} /{amp}gt; {amp}lt;Route path="/" component={AppHome} /{amp}gt; {amp}lt;/Switch{amp}gt; {amp}lt;/HashRouter{amp}gt; ) } } const Login = () ={amp}gt; ( {amp}lt;div{amp}gt; Login Content {amp}lt;NavLink to="/AppHome"{amp}gt; go to App{amp}lt;/NavLink{amp}gt; {amp}lt;/div{amp}gt; ) const Register = () ={amp}gt; {amp}lt;div{amp}gt; Register Content {amp}lt;/div{amp}gt; const AppHome = () ={amp}gt; {amp}lt;div{amp}gt; Welcome to the App {amp}lt;/div{amp}gt; export default App ReactDOM.render({amp}lt;App /{amp}gt;, document.getElementById('root')) 
 {amp}lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"{amp}gt;{amp}lt;/script{amp}gt; 

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