Вопрос:

React.js: response-router-dom не работает в боковом меню

reactjs react-router react-router-dom

39 просмотра

2 ответа

18 Репутация автора

[Обновлено]: adeed Layoutи HomeКомпоненты

Я новичок в Reaction.js. Когда я определяю все маршруты в файле App.js, они работают должным образом, но после отдельных маршрутов и помещения в компонент боковой панели они не работают (перенаправлены на страницу 404). Как решить эту проблему? Тпй.

App.js

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

import Layout from "./containers/Layout/index";
import Home from "./containers/Home/index";
import NotFound from "./ui/ErroPages/NotFound/index"

var app = document.getElementById("app");

ReactDOM.render(
<BrowserRouter>
    <Layout>//my sidebar component inside Layout component there is
        <Switch>
           <Route path="/" exact component={Home} ></Route>         
           <Route path="*"  component={NotFound}></Route>
            //if Route Test defined here it`s work properly
        </Switch>
    </Layout>
</BrowserRouter>
    ,app
);
if (module.hot) {
     module.hot.accept();
}

Компонент боковой панели:

import React from 'react';
import {Route, Link, } from 'react-router-dom';
import Test from '../../containers/Test/index';

import '../../assets/img/Douran-logo.jpg';


const sidebar = () => {
    return (
        <aside className="main-sidebar sidebar-dark-primary elevation-4">
            <div className="sidebar">
                <div>
                    <nav className="mt-2">
                        <ul className="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
                            <li className="nav-item has-treeview">
                                <Link to="/test" className="nav-link">
                                    <i className="nav-icon fa fa-tachometer-alt"></i>
                                    <p>
                                        داشبورد
                                    </p>
                                </Link>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
            <Route path="/test" component={Test}></Route>                
        </aside>    
    );
}

мой Layoutкомпонент

class Layout extends React.Component{

    render(){
        return(
           <div> 
                <Header />
                <Sidebar />
                    <div className="content-wrapper">
                          //All contents is included here(Home,Test,...)
                    </div>     
                <Footer />
                <ControlSidebar/>
            </div>
        );
    }
}

Мой HomeКомпонент

    class Home extends React.Component {
    render(){
    return(
        <section className="content">
            {/* <!-- Default box --> */}
            <div className="card">
                <div className="card-header">
                    <h3 className="card-title">داشبورد</h3>

                    <div className="card-tools">
                        <button type="button" className="btn btn-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
                            <i className="fa fa-minus"></i></button>
                        <button type="button" className="btn btn-tool" data-widget="remove" data-toggle="tooltip" title="Remove">
                            <i className="fa fa-times"></i></button>
                    </div>
                </div>
                <div className="card-body">
                    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
          </div>
                {/* <!-- /.card-body --> */}
                <div className="card-footer">
                    فوتر
          </div>
                {/* <!-- /.card-footer--> */}
            </div>
            {/* <!-- /.card --> */}
        </section>
        // {/* <!-- /.content --> */}
    );
    }
}

export default Home;
Автор: rohullah rajaee Источник Размещён: 11.08.2019 06:26

Ответы (2)


0 плюса

7786 Репутация автора

Вам не нужно оборачиваться Routesвнутри LayoutКомпонента. Просто определите свое Routesснаружи Layoutи внутри BrowserRouter. Это необходимо для Routesправильной работы, поскольку BrowserRouterнужен способ определить, где Routesнаходятся их дочерние деревья. Для лучшей читабельности мой пример будет включать общий компонент приложения.

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

import Layout from "./containers/Layout/index";
import Home from "./containers/Home/index";
import NotFound from "./ui/ErroPages/NotFound/index"

var app = document.getElementById("app");

const App = () => {
   return(
     <BrowserRouter>
        <div>
           <Layout/>
           <Switch>
              <Route path="/" exact component={Home} ></Route>         
              <Route path="*"  component={NotFound}></Route>
              //if Route Test defined here it`s work properly
           </Switch>
        </div>

     </BrowserRouter>
   )
}

ReactDOM.render(<App />,app);

Также может иметь смысл иметь Sidebarкомпонент отдельно, а не внутри Layoutкомпонента, если вы не планируете показывать его Layoutпостоянно.

Автор: Christopher Ngo Размещён: 11.08.2019 07:50

0 плюса

6310 Репутация автора

Когда вы держите Routeснаружи Switch, NotFoundкомпонент становится видимым для всех Routeснаружи Switch. Например,

<BrowserRouter>
   <Layout/>   => This component conatins <Route path="/test" component={Test}></Route>
   <Switch>
      <Route path="/" exact component={Home} ></Route>         
      <Route path="*"  component={NotFound}></Route>
      //if Route Test defined here it`s work properly
   </Switch>
</BrowserRouter>

Когда вы нажмете, Linkчтобы получить Testкомпонент, вы получите Testкомпонент, а также NotFoundкомпонент. Потому <Route path="/test" component={Test}></Route>что не внутри Switch.

Мое предложение состоит в том, чтобы держать вас только Routeв одном месте, а именно в Switch.

Как вы хотите, ваш Layoutдолжен быть таким,

<div> 
   <Header />
   <Sidebar />
   <div className="content-wrapper">
       //All contents is included here(Home,Test,...)
   </div>     
   <Footer />
   <ControlSidebar/>
</div>

Я предлагаю вам сохранить только Routeв Layoutкомпоненте,

<div>
    <Header />
    <Sidebar />
    <div className="content-wrapper">
        <BrowserRouter>
            <Sidebar />  //Don't write any <Route> inside of Sidebar component
            <Switch>
                <Route path="/" exact component={Home}></Route>
                <Route path="/test" component={Test}></Route>  
                <Route path="*" component={NotFound}></Route>
            </Switch>
        </BrowserRouter>
    </div>
    <Footer />
    <ControlSidebar />
</div>

И непосредственно монтировать Layoutкомпонент,

ReactDOM.render(<Layout />,app);

демонстрация

Автор: ravibagul91 Размещён: 11.08.2019 10:33
Вопросы из категории :
32x32