路由器在同一页面上渲染组件而不是在新页面上渲染 [英] Router rendering the component on the same page rather than rendering in a new page

问题描述

路由器在同一页面上渲染页面而不是生成新页面.可能是什么问题?每当我点击链接 Polls 时，它只会在那里呈现页面，但 URL 在浏览器中显示为已更改.

民意调查.js

从'react'导入React；从react-router-dom"导入{链接}；类 Polls 扩展了 React.Component{使成为() {返回(<div><h1>民意调查页面</h1><p>这是民意调查页面</p>

)}}出口{民意调查}

选择.js

import { BrowserRouter as Router, Route, Link } from "react-router-dom";从./Polls"导入{Polls}；类 ShowChoice 扩展了 React.Component{使成为() {返回(<路由器><Link to='/polls'>Polls</Link><Route path='/polls' component={Polls}/></路由器>)}}

并且 ShowChoice 在 APP

中呈现

渲染流程就像

index>APP>ShowChoices

(链接到 ShowChoices 中的投票)

而我的 APP.js 是

class App 扩展 React.Component {使成为() {返回 (<ShowChoice formResult={this.state.result}/>);}}导出默认应用程序；

解决方案

您已在 ShowChoice 组件中添加了您的 Route.然后将您的 ShowChoice 组件添加到 App 组件.

因此，无论何时单击 Link，您的 URL 都会更改，但它只会在 App 组件中呈现组件.所以你的 App 组件的内容对你也是可见的.

为了让您在点击 Link 时感觉像是获得了新页面，您需要将所有的 Route 组合在顶层，可能在一个单独的组件中，

const 路由器 = () =>{返回 (<浏览器路由器><开关><路由精确路径="/" component={App}/><Route path="/polls" component={Polls}/></开关></BrowserRouter>)}

所以这将在第一次渲染时默认渲染 App 组件，这将渲染 App 组件中添加的 ShowChoice 组件，您将看到 <Polls 组件的代码>链接.

现在点击Link，您将获得Polls 组件的新页面.

演示

Router is rendering the page on the same page than to generate a new page. What might be the problem? Whenever I click the link Polls , it renders the page only there but the URL is shown as changed in the browser.

Polls.js

import React from 'react';
import {Link} from "react-router-dom";

class Polls extends React.Component{
    render() {
        return(
            <div>
                <h1>Polls Page</h1>
                <p>This is Polls Page </p>
            </div>
        )
    }
}

export {Polls}

Choices.js

import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import {Polls} from "./Polls";

class ShowChoice extends React.Component{
    render() {
        return(
            <Router>
                <Link to='/polls'>Polls</Link>
                <Route path='/polls' component={Polls} />
            </Router>
        )
    }
}

And the ShowChoice is rendered inside APP

flow of rendering is like

index>APP>ShowChoices 

(link to the Polls inside ShowChoices)

and my APP.js is

class App extends React.Component {
    render() {
        return (
            <ShowChoice formResult={this.state.result} />
        );
    }
}
export default App;

解决方案

You have added your Route in ShowChoice component. Your ShowChoice component is then added to App component.

So whenever yo click the Link, your URL will get changed but it will render the component in App component only. So your App component's content is also visible to you.

To make it feel like you get new page when you click the Link, you need to combine all the Route at top level, may be in a separate component,

const Routers = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/" component={App} />
        <Route path="/polls" component={Polls} />
      </Switch>
    </BrowserRouter>
  )
}

So this will render App component by default on first render, which will render ShowChoice component added in App component and you will see Link for your Polls component.

Now clicking on Link, you will get new page of your Polls component.

Demo

这篇关于路由器在同一页面上渲染组件而不是在新页面上渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！