Question

我是第一次使用React-Router。我试图让主页上的按钮转到其各自的URL，但是当我单击按钮时，URL会更改，但视图不会更改。我在控制台上也没有任何错误。我想知道是否有人可以指出正在发生的事情。我用链接包装了每个按钮，并为其分配了单击时所需的路径。我想知道是否有人可以指出我做错了什么。

Homepage.js

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

class HomePage extends React.Component {

    render(){
        return (
            <div>
                 <h1>Welcome</h1>
                <p>Please select a category </p>
                <Link to="/ProgrammingJokes">
                <button>Programming Jokes</button>
                </Link>
                <Link to="/DadJokes">
                 <button>Dad Jokes</button>
                 </Link>
                 <Link to="/SportsJokes">
                <button>Sports Jokes</button>
                </Link>
            </div>
        )
    }
}

export default HomePage;

App.js

import React from 'react';
import HomePage from './components/HomePage'
import DadJokesApi from './components/DadJokesApi'
import SportsJokesApi from './components/SportsJokesApi'
import ProgrammingJokesApi from './components/ProgrammingJokesApi';
import { Route, Switch} from "react-router-dom";

function App() {
  return (
      <main>
        <Switch>
          <Route path="/" component={HomePage} />
          <Route path="/DadJokes" component={DadJokesApi} />
          <Route path="/SportsJokes" component={SportsJokesApi} />
          <Route path="/ProgrammingJokes" component={ProgrammingJokesApi} />
        </Switch>
      </main>

  );
}

export default App;

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
  <BrowserRouter>
    <React.StrictMode>
    <App />
    </React.StrictMode>
  </BrowserRouter>,
  document.getElementById('root')
);

Answer 1

尝试将根路由放在列表的末尾。

因为：

一个<Switch>浏览其子<Route>并呈现第一个一个与当前网址匹配的

来自https://reacttraining.com/react-router/web/guides/quick-start

  <Switch>
      <Route path="/DadJokes" component={DadJokesApi} />
      <Route path="/SportsJokes" component={SportsJokesApi} />
      <Route path="/ProgrammingJokes" component={ProgrammingJokesApi} />
      <Route path="/" component={HomePage} />
  </Switch>

Answer 2

您的Switch每次都与第一条路线匹配。您需要使用

<Route exact path = '/' component = {Component}/>

Answer 3

您可以在路线上使用exact属性。

为true时，仅在路径与location.pathname完全匹配时才会匹配。

您可以在此处https://reacttraining.com/react-router/web/api/Route/exact-bool

了解更多信息

结果必须是这样的：

  <Route path="/DadJokes" exact component={DadJokesApi} />

已安装React-Router-URL会更改，但视图不会更改

3 个答案: