反应不渲染路由组件

Question

我正在构建一个带有管理仪表板的面向消费者的应用程序。我想为他们保留路由，因此尝试委托 :-

App.js

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

//styles
import './style/bootstrap/bootstrap.scss';

//apps
import Mainapp from './mainapp/Mainapp';
import Admin from './admin/Admin';

const MainappContainer = () => (
  <Mainapp />
);

const AdminContainer = () => (
  <Admin />
);

class App extends Component{
  render(){
    return (
      <Router>
        <Switch>
            <Route path="/admin" component={AdminContainer}/>
            <Route path="/" component={MainappContainer}/>
        </Switch>
      </Router>
    )
  }
}

export default App;

Admin.js

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


//styles
import './admin-style.scss';

//layout
import ControlPanel from './component/layout/ControlPanel';
import Navbar from './component/layout/Navbar';

//pages
import Quote from './component/pages/quote/Quote';

class Admin extends Component{
    render(){
      return (
        <div className="adminWrapper">
          <ControlPanel />
          <section className="viewPanel">
            <Navbar />
            <Router>
              <Route path="/quote" component={Quote}/>
            </Router>
          </section>
        </div>
      )
    }
  }

  export default Admin;

但是当我点击 URL

http://localhost:3000/admin/quote

它似乎没有加载报价组件

Quote.js

import React, { Component } from 'react';

class Quote extends Component {
    render() {
        return (
            <div className="float-right pr-3">
                <h3>
                    Quote Page
                </h3>
            </div>
        )
    }
}

export default Quote;

Answer 1

 <Route exact path="/admin" component={AdminContainer}/>     
 <Route exact path="/admin/quote" component={Quote}/>

这不会将您转到 /admin/quote，而是将您转到 /admin/admin/quote。

因为它在管理员内部，所以 /quote 就足够了

<Route path="/admin" component={AdminContainer}/>
<Route path="/quote" component={Quote}/>

Answer 2

处理嵌套子路由时，最简单的解决方案是使用match.

path - (string) The path pattern used to match. Useful for building nested Routes.

url - (string) The matched portion of the URL. Useful for building nested Links.

根据设计，放置在路由 component 渲染方法中的组件会从 react-router-dom 获得几个额外的道具。其中有history和match。您可以利用这些道具来匹配子路由 and/or 以控制浏览器历史记录位置。

此外，你只需要一个实例BrowserRouter位于应用程序的顶层，然后你可以使用Switch来选择呈现任何主要或次要路线。你不需要使用 class 组件，除非你使用 state and/or 一个 class 字段。

您的应用程序的一个非常基本、基本的工作示例:

src/components/Admin/index.js

import React from "react";
import { Switch, Link, Route } from "react-router-dom";
import ControlPanel from "../ControlPanel";
import Quote from "../Quote";

// since Admin is placed inside a Route's component render
// method, it has access to history and match
function Admin({ history, match }) {
  return (
    <div className="adminWrapper">
      <ControlPanel />
      <section className="viewPanel">
        <Link to={`${match.url}/quote`}>View quote</Link>
        <br />
        <Switch>
          <Route exact path={`${match.path}/quote`} component={Quote} />
        </Switch>
      </section>
      <br />
      <button type="button" onClick={() => history.goBack()}>
        Go Back
      </button>
    </div>
  );
}

export default Admin;

index.js

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Link, Route, Switch } from "react-router-dom";
import Admin from "./components/Admin";

const linkStyle = {
  padding: "0 10px"
};

function App() {
  return (
    <BrowserRouter>
      <Link style={linkStyle} to="/">
        Home
      </Link>
      <Link style={linkStyle} to="/admin">
        Admin
      </Link>
      <Switch>
        <Route path="/admin" component={Admin} />
        <Route path="/" render={() => <h1>Main App</h1>} />
      </Switch>
    </BrowserRouter>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

Answer 3

关注Nested Routing Example

您需要做的主要改变是：
1. 从 Admin 组件中删除 <Router></Router> 和
2. 将 match.path 添加到 "/quotes" 之前，就像在示例中的 Topics 组件中所做的那样。在示例中，Topics 是一个函数组件，因此它接收 match 作为函数参数。由于您的 Admin 组件是 class 组件，您可以在 render 方法中将其作为 this.props.match 访问。

<Route path={`${this.props.match.path}/quote`} component={Quote}/>

反应不渲染路由组件

React not rendering Route Components

reactjs

react-router

react-component