React BrowserRouter Route 不会改变 url答案

【问题标题】：React BrowserRouter Route doesn't change urlReact BrowserRouter Route 不会改变 url
【发布时间】：2020-01-25 18:12:38
【问题描述】：

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

这是我的 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 strong>（在这种情况下，悲伤的人是蛞蝓）

我什至尝试将这一行全部删除

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

提前非常感谢！

【问题讨论】：

你能显示你试图导航到/detailed-view/:slug的代码吗？

标签： django reactjs react-router django-urls

【解决方案1】：

实际上对不起伙计们愚蠢的问题。

问题是我需要更改链接到相同 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中的url

【讨论】：