React Router-不同組件中的路由

Question

我的應用程序如下所示，我有兩個組件App和Home我可以從App轉到Home，但是在Home組件中還有另外兩個路由Profile和Quotes 。

在單擊配置文件和報價的鏈接時，我沒有任何異常，也沒有加載該組件。

但是，如果我將路線移動到App組件，則它將加載profile並quotes 。

這里可能是什么問題。 請指導。

應用程序組件如下-

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;

簽出“歷史記錄”對象的“ Quotes組件的“ Home組件和控制台。

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

從首頁<Route in App文件中刪除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

我希望這能解決您的問題。