React 路由器更改 URL 但不更改视图

Question

你好，我的 React 项目中有一个单独的路由和 links 文件，当单击 link 时，它会更改 URL 但不会更改视图，我无法弄清楚为什么.

这是我的index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from 'react-router-dom';
import Routes from "./router";
import RenderSite from './App';

ReactDOM.render(<BrowserRouter><RenderSite /></BrowserRouter>, document.getElementById('site-wrapper'));

这是我的 link 文件

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

const HeaderNav = () => {
    return(
        <div className="header-links">
            <Link to="/" className="link">Home</Link>
            <Link to="/about" className="link">About</Link>
            <Link to="/contact" className="link">Contact Us</Link>
        </div>
    );
}

export default HeaderNav;

最后这是我的 router.js

import React from 'react'
import HomePage from './pages/home'
import AboutPage from './pages/about'
import ContactPage from './pages/contact'
import {
  Switch,
  Route
} from 'react-router-dom';

const Routes = () => (
    <Switch>
      <Route exact path="/" component={HomePage} />
      <Route exact path="/about" component={AboutPage} />
      <Route exact path="/contact" component={ContactPage} />
    </Switch>
);

export default Routes;

为清楚起见，这里是我尝试加载的其中一个页面的示例：

import React from 'react'
import PageLayout from '../components/layout'

class AboutPage extends React.Component  {
    render() {
      return (
        <div>
        <PageLayout />
        <p>About page</p>
        </div>
      );
    }
}

export default AboutPage

Answer 1

导入 BrowserRouter 并在 BrowserRouter

中包装路由

import React from 'react'
import HomePage from './pages/home'
import AboutPage from './pages/about'
import ContactPage from './pages/contact'
import {
  Switch,
  Route,
  BrowserRouter as Router
} from 'react-router-dom';

const Routes = () => (
    <Router>
     <Switch>
      <Route exact path="/" component={HomePage} />
      <Route exact path="/about" component={AboutPage} />
      <Route exact path="/contact" component={ContactPage} />
     </Switch>
    </Router> 
);

export default Routes;

Answer 2

我看不到您的 App.js 代码。您在 index.js 中导入了 Routes 但还没有使用它。您需要在 App component.Something 中添加 Routes 组件，如下所示：

function App(){
  return(
    <div>
      {Routes()}
    </div>
  )
}

React 路由器更改 URL 但不更改视图

React router changes URL but not the view

javascript

routing

reactjs