React BrowserRouter路由不会更改url

问题描述 投票:-1回答:1

我正在尝试让我的React Router更改我的实际网址。现在它会更改组件,但不会更改我的浏览器中的实际网址

这是我的app.js

import React, { Component } from 'react';
import './App.css';
import { BrowserRouter, Route, Redirect, Switch} from 'react-router-dom';

import PaintingList from './paintings/PaintingList';
import PaintingDetail from './paintings/PaintingDetail';
import PaintingCreate from './paintings/PaintingCreate';

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <Switch>   
        <Route exact path='/' component={PaintingList}/>
        <Route path='/paintings' component={PaintingList}/>
        <Route path='/paintings/create' component={PaintingCreate}/>
        <Route path='/detailed-view/:slug' component={PaintingDetail}/>
        </Switch>
      </BrowserRouter>
    );
  }
}

export default App;

我正在尝试使PaintingDetail组件指向/ detailed-view /:slug路径,但我的实际浏览器始终显示http://127.0.0.1:8000/paintings/sad-man(sad-man是这种情况)

我什至试图一起删除此行

<Route path='/detailed-view/:slug' component={PaintingDetail}/>

该组件仍然有效,但浏览器仍然显示http://127.0.0.1:8000/paintings/sad-man

我正在使用Django作为后端,我不确定是否与此有关。

这是我的绘画模型的url.py

from django.urls import path, re_path

from .views import (
        PaintingDetailAPIView,
        PaintingListCreateAPIView,
    )

app_name = 'paintings-api'

urlpatterns = [
    path('', PaintingListCreateAPIView.as_view(), name='list-create'),
    re_path(r'^(?P<slug>[\w-]+)/$', PaintingDetailAPIView.as_view(), name='detail'),
 ]

这是我的Django主文件夹中的urls.py:

urlpatterns = [
    path('', TemplateView.as_view(template_name='react.html')),
    re_path(r'^paintings', TemplateView.as_view(template_name='react.html')),
    path('admin/', admin.site.urls),
    path('api/paintings/', include('paintings.urls'))

非常感谢!

django reactjs react-router django-urls
1个回答
0
投票
问题是我需要更改作为指向相同URL链接的组件以使其正常工作。这是我的PaintingInline组件

import React, { Component } from 'react'; import { Link } from 'react-router-dom'; import '../css/Paintinginline.css' // react-router-dom <Link> documentation: https://reacttraining.com/react-router/web/api/Link class PaintingInline extends Component { render() { const {paintingItem} = this.props // console.log(paintingItem) // console.log(paintingItem.srcs[0].src) return ( <div> {paintingItem !== undefined ? <div className={"inline-container"}> <Link maintainScrollPosition={false} to={{ pathname:`/paintings/detail/${paintingItem.slug}`, state:{fromDashboard: false} }}> <img className={"inline-main-image"} src={paintingItem.srcs[0].src} /> </Link> <h6>{paintingItem.title}</h6> <a>{paintingItem.size_measurements}</a> <a>{paintingItem.artist}</a> <a>${parseInt(paintingItem.price).toLocaleString()}</a> </div> : ""} </div> ); } } export default PaintingInline;

匹配app.js中所需的网址

© www.soinside.com 2019 - 2024. All rights reserved.