Question

路由器将页面呈现在同一页面上，而不是生成新页面。可能是什么问题？每当我单击链接 Polls 时，它仅在此处呈现页面，但URL在浏览器中显示为已更改。

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>
        )
    }
}

ShowChoice在APP内部呈现

渲染流程就像

index>APP>ShowChoices

（链接到ShowChoices内部的民意调查）

而我的APP.js是

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

Answer 1

尝试更改路径并像这样使用exact

<Route exact path="/polls" component={Polls}/>

更多信息：https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Route.md

Answer 2

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

因此，每当您单击Link时，您的URL都会更改，但只会在App组件中呈现该组件。因此，您也可以看到App组件的内容。

要使您感觉像单击Link时会获得新页面一样，您需要将所有Route合并到顶层，可能在单独的组件中，

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

因此，默认情况下，这将在第一次渲染时渲染App组件，这将渲染ShowChoice组件中添加的App组件，您将为{{1 }}组件。

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

Demo

路由器在同一页面上呈现组件，而不是在新页面中呈现

2 个答案: