. in :react-路由器-dom在侧栏菜单中不起作用

Question

更新: adeed Layout和Home组件

我是react.js的新手。当我在App.js文件中定义所有路由时，它们正常工作，但是在单独路由并放入侧栏组件之后，它们不工作(重定向到404页).how来解决这个问题？tnx

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;

Answer 1

当您将Route保持在Switch之外时，NotFound组件对于Switch之外的所有Route都是可见的。例如,

<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**.** 保留在一个地方，即在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);

演示

Answer 2

您不需要将您的Routes封装在Layout组件中。只需在Routes之外和BrowserRouter中定义您的BrowserRouter即可。这是Routes正常工作所必需的，因为BrowserRouter需要一种方法来检测Routes在其子树中的位置。为了获得更好的可读性，我的示例将包含一个完整的App组件。

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组件中使用Layout也可能更有意义。

Answer 3

<div> 
   <Header />
   <Sidebar />
   <div className="content-wrapper">
      
   </div>     
   <Footer />
   <ControlSidebar/>
</div>