[英]React Router - Routes in different components
My app is something like below, I have a two components - App
and Home
I can go from App to Home, but in the Home
component there are two other routes - Profile
and Quotes
. 我的应用程序如下所示,我有两个组件
App
和Home
我可以从App转到Home,但是在Home
组件中还有另外两个路由Profile
和Quotes
。
On clicking the links for profile and quotes, I don't get any exception, and neither does it load that component. 在单击配置文件和报价的链接时,我没有任何异常,也没有加载该组件。
However if I move the routes to the App
component, then it loads profile
and quotes
just fine. 但是,如果我将路线移动到
App
组件,则它将加载profile
并quotes
。
What could be the issue here. 这里可能是什么问题。 Please guide.
请指导。
The App component is below - 应用程序组件如下-
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
The Home component is below - 主页组件如下-
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
And in the index.js
as below - 在
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')
);
When you use routes in a component, it needs to be wrapped with a Router
component. 在组件中使用路由时,它需要与
Router
组件一起包装。 BrowserRouter
in your case. 您的
BrowserRouter
。
So, when you add routes to Home
component, you need to do the same there. 因此,当您向
Home
组件添加路由时,您需要在此处进行相同的操作。
But there will be an issue with that. 但这会有一个问题。 Both the Routers are independent of each other and have a different
history
object. 两个路由器彼此独立,并且具有不同的
history
对象。
This not a fix, you shouldn't be doing this. 这不是解决方法,您不应该这样做。 This is just for you to understand better:
这只是为了让您更好地理解:
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;
Check out the Home
component and console of the Quotes
component for the history object. 签出“历史记录”对象的“
Quotes
组件的“ Home
组件和控制台。
You need to do something like : 您需要执行以下操作:
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;
And in your App.js file: 在您的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;
What you are doing now is making routes on a global level and you can use {NavLink} or {Link} anywhere in your app, start making routes by <Route exact path="/" render={props => (<AppRoute Component={Home} props={props} />)}/>
您现在正在做的事情是在全球范围内进行路由,您可以在应用程序中的任何位置使用{NavLink}或{Link},通过
<Route exact path="/" render={props => (<AppRoute Component={Home} props={props} />)}/>
Just import your component and put it in Component={YourComponent}
and add the path whatever you want to call it like path="/Home/Profiles"
只需导入您的组件并将其放在
Component={YourComponent}
然后添加您要调用的路径即可,例如path="/Home/Profiles"
Checkout this starter-kit on GitHub 在GitHub上检查此入门工具包
Remove exact
from home <Route
in App file. 从首页
<Route
in App文件中删除exact
。
App.js App.js
<Route path='/home' component={Home}/>
use exact
only when there is no child route associated with it otherwise it will not route to children route. 仅当没有子路由与其关联时才使用
exact
,否则将不会路由到子路由。
Update Home.js 更新Home.js
Add /home
in Home.js Route
and Link
在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
I hope this will solve your problem. 我希望这能解决您的问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.