Question

[已更新]： Layout和Home组件

我是react.js的新手。当我在App.js文件中定义所有路由时，它们可以正常工作，但是在单独的路由中放入侧边栏组件后，它们将不起作用（重定向到404页）。如何解决此问题？ 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

将string text = await response.Content.ReadAsStringAsync(); ProductTypes= JsonConvert.DeserializeAnonymousType<List<ProductType>>(text , ProductTypes);保留在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

Demo

Answer 2

您不需要将Routes包装在Layout组件中。只需在Routes之外和Layout内定义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组件中可能更有意义。 / p>

React.js：react-router-dom在侧边栏菜单中不起作用

2 个答案: