組件未使用 react-router v5 呈現

Question

我目前在 reactjs 項目儀表板 Web 應用程序中工作。 我還使用反應路由來導航網站中的內容。

我有這樣的 web 應用程序。

當我從側邊欄單擊“儀表板”時，它會正確顯示內容。 此外，當我單擊側邊欄上的“Antrian Pasien”時。

但是，當我在“Antrian Pasien”內容或頁面中單擊“Ke Form”時。 它不渲染下一個組件。 [![

( https://i.stack.imgur.com/mvjgs.png )]( https://i.stack.imgur.com/mvjgs.png )

我想更改頁面內的內容。 不只是在側邊欄。 這是我來自 web 應用程序的版本：react: 16 react-router-dom: 5.3.0

來自 index.js 代碼：

// import resources and library
import React from 'react';
import ReactDOM from 'react-dom';
import { Route, BrowserRouter as Router } from 'react-router-dom';
import reportWebVitals from './reportWebVitals';

// import './index.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import './assets/scss/style.css';
import './index.css';

// Import Page
import Login from './pages/AuthPage/Login';
import Register from './pages/AuthPage/Register';
import App from './App';


// Import Component


// mapping route
const routing = (
  <Router>
    <Route exact path='/' component={App}/>
    <Route exact path='/login' component={Login}/>
    <Route exact path='/register' component={Register} />
  </Router>
)

ReactDOM.render(routing, document.getElementById('root'));

應用程序.js：

import React, { useState } from 'react';
import { Route, Switch , NavLink, HashRouter, useRouteMatch, BrowserRouter as Router, Redirect, Link, Routes } from 'react-router-dom';

import './index.css';
import ImgLogo from './assets/images/img-logo.png';
import { Container } from 'react-bootstrap';

import Dashboard from './pages/Dashboard/Dashboard';

import Registration from './pages/Registration/Registration';

import Footer from './component/Footer';
import NavigationBar from './component/Navbar';
import styled from 'styled-components';
import Forms from './component/Registration/forms/Forms';

const routes = [
    {
        path: '/',
        exact: true,
        sidebar: () => <div>Dashboard</div>,
        main: () => (
            <>
                <Dashboard/>
            </>
        )
    },
    {
        path: '/antrian-pasien',
        sidebar: () => <div>Antrian Pasien</div>,
        main: () => 
                <>
                    <Registration/>
                </>
    },
    {
        path: '/antrian-pasien/form-antrian-pasien-baru',
        exact: true,
        sidebar: null,
        main: () => <> <Forms/> </>
    }
]

// Sidebar

const LogoIcon = styled.div`
  margin-left: 1rem;
  font-size: 2rem;
  margin-top: 0;
  margin-bottom: 10px;
`;

const SidebarNav = styled.div`
  background: #fff;
  color: #000;
  width: 200px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
 
  overflow-y: auto;
`;

const SidebarWrap = styled.div`
  width: 100%;
  color: #000;
`;

// Main Content 
const Wrapper = styled.div` 
    display: flex;
`;

const ContentWrapper = styled.div`
    background-color: #f8f9fc;
    width: 100%;
    overflow-x: hidden;
`;

const Content = styled.div` 
    flex: 1 0 auto;
    position: relative;
    left: 0px;
    right: 0px;
    top: 0px;
`;

const App = () => {
   return (
    <>
        <Router>
            <Wrapper>
                <div style={{fontSize: '10px'}}>
                    <SidebarNav>
                    <LogoIcon>
                    <img src={ImgLogo} alt="Gambar Logo Siklus Care"></img>
                    </LogoIcon>

                    <SidebarWrap>
                        <ul>
                            <li>
                                <Link to="/">Dashboard</Link>
                            </li>
                            <li>
                                <Link to="/antrian-pasien">Antrian Pasien</Link>
                            </li>
                        </ul>
                    </SidebarWrap>
                    </SidebarNav>
                </div>
                <Switch>
                        {routes
                            .filter(({ sidebar }) => !!sidebar)
                            .map((route, index) => (
                                <Route
                                    key={index}
                                    path={route.path}
                                    exact={route.exact}

                                />
                            ))}
                </Switch>
                <ContentWrapper>
                        <Content>
                            <NavigationBar/>
                                <Switch> 
                                    {
                                        routes.filter(({ main }) => !!main)
                                        .map((route, index) => (
                                            <Route key={index} path={route.path} exact={route.exact} children={<route.main/>} />
                                        ))
                                    }    
                                </Switch>     
                        </Content>
                    </ContentWrapper>
            </Wrapper>
        </Router>                            
    </>
   )
}

export default App;

注冊.js

import React from "react";
import { Link } from "react-router-dom";
import { Container } from "react-bootstrap";
import GridTwoColumnStart from "../../component/Registration/GridTwoColumnsStart";
import GridTwoColumnsNotEqual from "../../component/Registration/GridTwoColumnsNotEqual";
import GridFullColumn from "../../component/Registration/GridFullColumn";

const Registration = () => {
    return (
        <div>
            <Link to="/antrian-pasien/form-antrian-pasien-baru">Ke Form</Link>
            <Container>
                    <h4>Registration</h4>
                        <GridTwoColumnStart/>
                        <GridTwoColumnsNotEqual/>
                        <GridFullColumn/>
            </Container>
        </div>
    )
}


export default Registration;

我不知道，任何幫助將不勝感激。 謝謝你。

Answer 1

問題

1. App組件呈現在確切的路徑"/"上，因此當 URL 路徑不是"/"時， App將被卸載並且任何后代路由都不會被掛載以進行匹配。
2. App組件正在渲染嵌套在外部主路由器中的另一個Router 。 這意味着由內部嵌套路由器處理的任何路由/導航操作都不會被主要外部路由器知道。 每個應用程序應該只有一個路由器提供路由上下文。

解決方案

1. 重新排序根路由，並以路徑特異性的相反順序將它們渲染到Switch組件中，並刪除exact屬性。 如果命令正確，幾乎根本不需要使用exact屬性來限制路由匹配。
2. 移除在App組件中呈現的嵌套BrowserRouter 。

代碼：

索引.js

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

// mapping route
const routing = (
  <Router>
    <Switch>
      <Route path='/login' component={Login} />
      <Route path='/register' component={Register} />
      <Route path='/' component={App} />
    </Switch>
  </Router>
);

ReactDOM.render(routing, document.getElementById('root'));

應用程序.js

import {
  Route,
  Switch,
  NavLink,
  Redirect,
  Link
} from 'react-router-dom';

const App = () => {
  return (
    <>
      <Wrapper>
        <div style={{ fontSize: '10px' }}>
          <SidebarNav>
            <LogoIcon>
              <img src={ImgLogo} alt="Gambar Logo Siklus Care" />
            </LogoIcon>

            <SidebarWrap>
              <ul>
                <li>
                  <Link to="/">Dashboard</Link>
                </li>
                <li>
                  <Link to="/antrian-pasien">Antrian Pasien</Link>
                </li>
              </ul>
            </SidebarWrap>
          </SidebarNav>
        </div>
        <Switch>
          {routes
            .filter(({ sidebar }) => !!sidebar)
            .map((route, index) => (
              <Route
                key={index}
                path={route.path}
                exact={route.exact}
              />
            ))
          }
        </Switch>
        <ContentWrapper>
          <Content>
            <NavigationBar />
            <Switch> 
              {routes
                .filter(({ main }) => !!main)
                .map((route, index) => (
                  <Route key={index} path={route.path} exact={route.exact} children={<route.main/>} />
                ))
              }    
            </Switch>     
          </Content>
        </ContentWrapper>
      </Wrapper>                           
    </>
  );
};

export default App;