我正在尝试让我的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'))
非常感谢!
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中所需的网址