Reactjs-使用react路由器更改url，但组件不会更改

我想呈现一个带有登录和注册页面链接的导航栏，但每当我单击它们时，url就会按照我的要求进行更改，但相应的组件不会呈现。这是我的密码：

App.js

import React, { Component } from 'react';
import NavBar from './components/NavBar/NavBar';
import {BrowserRouter as Router,Route,withRouter} from "react-router-dom";
import Login from './components/Login';
import SignUp from './components/SignUp';
import Landing from './components/Landing';


class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">

          <NavBar />
          <Route exact path="/" component={withRouter(Landing)} />
          <div className="container">
            <Route exact path="/login" component={withRouter(Login)} />
            <Route exact path="/signup" component={withRouter(SignUp)} />
          </div>
        </div>
      </Router>
    );
  }
}
export default App;

import React,{Component} from "react";
import {BrowserRouter as Router,withRouter,Link} from "react-router-dom";
import './NavBar.css'



class NavBar extends Component {
    render() {
        return (
            <Router>
            <header className='navbar'>
                <nav className='navbar_navigation'>
                    <div />
                    <div className='navbar_logo'>
                        <Link to='/'>Home</Link>
                    </div>
                    <div className='navbar_nav-items'>
                        <ul>
                            <li><Link to="/signup" className="nav-link">Sign up</Link></li>
                            <li><Link to="/login" className="nav-link">Log In</Link></li>
                            <li><Link to="/guest-env" className="nav-link">Continue as guest</Link></li>
                        </ul>
                    </div>
                </nav>
            </header>
            </Router>
        );
    }
}

export default withRouter(NavBar);

import React，{Component}来自'React'；
从“./components/NavBar/NavBar”导入导航栏；
从“react Router dom”导入{BrowserRouter as Router，Route，withRouter}；
从“./components/Login”导入登录名；
从“./components/SignUp”导入注册；
从“./组件/平台”导入平台；
类应用程序扩展组件{
render（）{
返回(
);
}
}
导出默认应用程序；

NavBar.js

import React, { Component } from 'react';
import NavBar from './components/NavBar/NavBar';
import {BrowserRouter as Router,Route,withRouter} from "react-router-dom";
import Login from './components/Login';
import SignUp from './components/SignUp';
import Landing from './components/Landing';


class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">

          <NavBar />
          <Route exact path="/" component={withRouter(Landing)} />
          <div className="container">
            <Route exact path="/login" component={withRouter(Login)} />
            <Route exact path="/signup" component={withRouter(SignUp)} />
          </div>
        </div>
      </Router>
    );
  }
}
export default App;

import React,{Component} from "react";
import {BrowserRouter as Router,withRouter,Link} from "react-router-dom";
import './NavBar.css'



class NavBar extends Component {
    render() {
        return (
            <Router>
            <header className='navbar'>
                <nav className='navbar_navigation'>
                    <div />
                    <div className='navbar_logo'>
                        <Link to='/'>Home</Link>
                    </div>
                    <div className='navbar_nav-items'>
                        <ul>
                            <li><Link to="/signup" className="nav-link">Sign up</Link></li>
                            <li><Link to="/login" className="nav-link">Log In</Link></li>
                            <li><Link to="/guest-env" className="nav-link">Continue as guest</Link></li>
                        </ul>
                    </div>
                </nav>
            </header>
            </Router>
        );
    }
}

export default withRouter(NavBar);

import React，{Component}来自“React”；
从“react Router dom”导入{BrowserRouter as Router，withRouter，Link}；
导入“./NavBar.css”
类导航栏扩展组件{
render（）{
返回(
家

报名
登录
继续作客

);
}
}
使用路由器导出默认值（导航栏）；

登陆、登录和注册基本上都是在h2中呈现文本的组件，因为我想看看它们是否呈现良好。另外，当我直接转到相应的URL:/login或/signup时，我看不到任何更改，导航栏也是这些URL中呈现的唯一内容。

---

我也尝试过添加交换机，但似乎没有任何改变。

这里的问题是，Navbar组件自己使用路由器，因此链路组件无法与呈现路由的外部

路由器

组件通信。确保只使用一个路由器组件实例

导航栏组件不需要

路由器

实例

class NavBar extends Component {
    render() {
        return (
            <header className='navbar'>
                <nav className='navbar_navigation'>
                    <div />
                    <div className='navbar_logo'>
                        <Link to='/'>Home</Link>
                    </div>
                    <div className='navbar_nav-items'>
                        <ul>
                            <li><Link to="/signup" className="nav-link">Sign up</Link></li>
                            <li><Link to="/login" className="nav-link">Log In</Link></li>
                            <li><Link to="/guest-env" className="nav-link">Continue as guest</Link></li>
                        </ul>
                    </div>
                </nav>
            </header>
        );
    }
}

类导航栏扩展组件{
render（）{
返回(
家

报名
登录
继续作客

);
}
}

---

如果要基于路由仅渲染一个组件，则需要使用react router的

交换机

组件：

import React, { Component } from 'react';
import {BrowserRouter as Router, Route, Switch} from "react-router-dom"


class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
          <NavBar />
            <Switch>
              <Route exact path="/">
                <Page 1 />
              </Route>
              <Route exact path="/login">
                <Page 2 />
              </Route>
              ... etc
            </Switch>
        </div>
      </Router>
    );
  }
}

export default App;

import React，{Component}来自'React'；
从“react Router dom”导入{BrowserRouter as Router，Route，Switch}
类应用程序扩展组件{
render（）{
返回(
等
);
}
}
导出默认应用程序；

我从导航栏中删除了路由器，但仍然遇到同样的问题。即使我键入url localhost:3000/login或/signup，我也不会得到它们各自的组件（这只是h2文本）。还有什么我做错了吗？你使用的是哪个版本的react路由器我使用的是react路由器dom版本5.1.2我添加了一个工作演示。通过更改url进行导航需要您在webpack中配置historyApiFallback。请看这篇文章：我遵循了你的代码，当我删除navbar.css文件导入时，我得到了与你相同的输出。我已经把它添加到了演示中，你能看一下并让我知道我的css文件做错了什么吗？