时间戳

首页 > 解决方案 > 如果我手动输入 URL 或刷新页面，组件将不会呈现 reactjs

javascript - 如果我手动输入 URL 或刷新页面，组件将不会呈现 reactjs

问题描述

我是 reactjs 的新手。我刚开始使用反应路由器。如果我手动输入路径或刷新页面，在 app.js 路由工作。如果我手动输入路径或刷新页面，登录组件中的相同路由将不起作用。我不知道这是否是正确的做法。为了更好地理解我在下面粘贴了我的代码请帮助我

谢谢你

应用程序.js 文件

import React from 'react';
import Header from './layout/header/index.js';
import Footer from './layout/footer/footer';
import './App.css';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
import Home from './components/Home/index';
import Login from './components/Login/index';
import Notfound from './components/notFound'

function App() {
  return (
    <Router>
       <div>
         <Header></Header>

         <Switch>
           <Route path="/" exact component={Home} />
           <Route path="/login" component={Login} />
           <Route component={Notfound} />
         </Switch>

         <Footer></Footer>
      </div>

    </Router>

  );
}

export default App;

login.js 组件

import React from 'react';
import image from '../../logos/banner.png';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
import './index.css';
import Login from './login';
import Signup from './signup';

class login extends React.Component{
    render(){
        return (
            <div className="container loginBody">
                <div className="row">
                    <div className="col-lg-10 mx-auto">
                        <div className="row">
                            <div className="col-lg-6">
                                <img className="loginImage" alt="" src={image} />
                            </div>
                            <div className="col-lg-6">
                                <Router>
                                    <Switch>
                                        <Route path="/login" component={Login}></Route>
                                        <Route path="/signup" component={Signup}></Route>
                                    </Switch>
                                </Router>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        );
    }
}

export default login;

包.json

"name": "mfrontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.4.1",
    "@testing-library/user-event": "^7.2.1",
    "bootstrap": "^4.4.1",
    "jquery": "^3.4.1",
    "popper.js": "^1.16.1",
    "react": "^16.13.0",
    "react-dom": "^16.13.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.0"

标签： javascriptreactjs

解决方案

Switch将呈现与 匹配的第一个组件，path但它不会向下遍历并尝试匹配子组件，Route除非它Switch path与App.

将所有路由移动到App组件并将它们从Login组件中删除

function App() {
  return (
    <Router>
      <Header />
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/login" component={Login} />
        <Route path="/signup" component={Signup} />
        <Route component={Notfound} />
      </Switch>
      <Footer />
    </Router>
  )
}

推荐阅读