React Router - 不同组件中的路由答案

【问题标题】：React Router - Routes in different componentsReact Router - 不同组件中的路由
【发布时间】：2019-09-12 10:09:57
【问题描述】：

我的应用如下所示，我有两个组件 - App 和 Home 我可以从 App 转到 Home，但在 Home 组件中还有另外两条路线 - Profile 和 Quotes。

单击配置文件和引号的链接时，我没有收到任何异常，也没有加载该组件。

但是，如果我将路由移动到 App 组件，那么它会加载 profile 和 quotes 就好了。

这可能是什么问题。请指导。

App 组件在下方 -

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

class App extends React.Component {
    state = { //...some vals }

    render() {
        return (
          <div>
            <Link to='/home'>Home</Link>
            <Switch>
              <Route exact path='/home' component={Home}/>
            </Switch>   
          </div>    
        )
    }
}

export default App

Home 组件在下面 -

import React, { Fragment } from 'react';
import { Route, Link, Switch } from 'react-router-dom'
import Profile from './Profile';
import Quotes from './Quotes';

class Home extends React.Component {
    state = { //...some vals }

    render() {
        return (
          <Fragment>
            <Link to='/profile'>Profile</Link>
            <Link to='/quotes'>Quotes</Link>
            <Switch>
              <Route exact path='/profile' component={Profile}/>
              <Route exact path='/quotes' component={Quotes}/>  
            </Switch>
          </Fragment>   
        )
    }
}

export default Home

在index.js 中如下-

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter } from 'react-router-dom'


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

【问题讨论】：

您可以查看我发布的答案。添加了一个代码框示例以更好地理解。
如果 app 中除了 home 之外别无其他，则不需要<switch>。而不是使用两个<router>，您可以使用多个带有match.url 的开关。 stackoverflow.com/questions/49208310/…

标签： reactjs react-router

【解决方案1】：

在组件中使用路由时，需要用Router 组件包装。 BrowserRouter 在你的情况下。

因此，当您向Home 组件添加路由时，您需要在那里执行相同的操作。

但这会有一个问题。两个路由器相互独立，并且有一个不同的history 对象。

这不是一个修复，你不应该这样做。这只是为了让您更好地理解：

import React, { Fragment } from "react";
import { BrowserRouter, Route, Link, Switch } from "react-router-dom";
import Profile from "./Profile";
import Quotes from "./Quotes";

class Home extends React.Component {
  state = {}; //...some vals }

  render() {
    return (
      <BrowserRouter>
        <Fragment>
          <Link to="/profile">Profile</Link>
          <Link to="/quotes">Quotes</Link>
          <Switch>
            <Route exact path="/profile" component={Profile} />
            <Route exact path="/quotes" component={Quotes} />
          </Switch>
        </Fragment>
      </BrowserRouter>
    );
  }
}

export default Home;

查看历史对象的Home 组件和Quotes 组件的控制台。

【讨论】：

【解决方案2】：

您需要执行以下操作：

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

import Home from "../components/Home";
// import your other pages/components here

const renderRoutes = () => {
  return (
    <Router>
      <div>
        <Switch>
          <Route
            exact
            path="/"
            render={props => (
              <AppRoute Component={Home} props={props} />
            )}
          />
        </Switch>
      </div>
    </Router>
  );
};

const AppRoute = ({ Component, Layout, props }) => {
  if (Layout) {
    return (
      <Layout {...props}>
        <Component {...props} />
      </Layout>
    );
  }

  if (!Component) {
    return <Layout {...props} />;
  }

  return <Component {...props} />;
};

export default renderRoutes;

在你的 App.js 文件中：

import React from 'react';
import RenderRoutes from './routes';

class App extends React.Component {
    constructor (props) {
        super(props);
    }

    render () {
        return (
            <div>
                <RenderRoutes/>
            </div>
        );
    }
}

export default App;

您现在正在做的是在全球范围内制作路线，您可以在应用中的任何位置使用 {NavLink} 或 {Link}，开始制作路线 <Route exact path="/" render={props => (<AppRoute Component={Home} props={props} />)}/>
只需导入您的组件并将其放入 Component={YourComponent} 并添加您想要调用的路径，例如 path="/Home/Profiles"
在GitHub上查看此入门工具包

【讨论】：

【解决方案3】：

从 App 文件中的 <Route 中删除 exact。

App.js

<Route path='/home' component={Home}/>

只有在没有与之关联的子路由时才使用exact，否则它不会路由到子路由。

更新 Home.js

在 Home.js 中添加 /home Route 和 Link

import React, { Fragment } from 'react';
import { Route, Link, Switch } from 'react-router-dom'
import Profile from './Profile';
import Quotes from './Quotes';

class Home extends React.Component {
    state = { //...some vals }
    render() {
        return (
          <Fragment>
            <Link to='/home/profile'>Profile</Link>
            <Link to='/home/quotes'>Quotes</Link>
            <Switch>
               <Route exact path='/home/profile' component={Profile}/>
               <Route exact path='/home/quotes' component={Quotes}/>  
            </Switch>
          </Fragment>   
    )
  }
}

export default Home

希望这能解决你的问题。

【讨论】：