Question

我的应用如下所示，我有两个组成部分-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

主页组件在下面-

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')
);

Answer 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组件的控制台。

Answer 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

上查看此入门工具包

Answer 3

从家exact的应用文件中删除<Route。

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

我希望这能解决您的问题。

React Router-不同组件中的路由

3 个答案: